Changeset 60516

Timestamp:

07/28/2025 12:38:41 AM (14 months ago)

Author:

joedolson

Message:

General: Prevent Media & Theme modals from events on modified arrow keys.

Change the left and right arrow key navigation used in the Theme and Media modal interfaces so the events don't fire when shift or ctrl are also pressed.

Includes tests.

Props praful2111, hiteshtalpada, joemcgill, sandeepdahiya, abcd95, joedolson.
Fixes #63126.

Location:

trunk

Files:

• src/js/_enqueues/wp/theme.js (modified) (2 diffs)
• src/js/media/views/frame/edit-attachments.js (modified) (1 diff)
• tests/qunit/index.html (modified) (1 diff)

trunk/src/js/_enqueues/wp/theme.js

@@ -1012 +1012 @@
                         this.close();
                 }
+
+                // Return if Ctrl + Shift or Shift key pressed
+                if ( event.shiftKey || ( event.ctrlKey && event.shiftKey ) ) {
+                        return;
+                }
+
                 // The right arrow key, next theme.
                 if ( event.keyCode === 39 ) {
@@ -1113 +1119 @@
                         // Bail if the filesystem credentials dialog is shown.
                         if ( $( '#request-filesystem-credentials-dialog' ).is( ':visible' ) ) {
+                                return;
+                        }
+
+                        // Return if Ctrl + Shift or Shift key pressed
+                        if ( event.shiftKey || ( event.ctrlKey && event.shiftKey ) ) {
                                 return;
                         }

trunk/src/js/media/views/frame/edit-attachments.js

@@ -256 +256 @@
                 }
 
+                // Return if Ctrl + Shift or Shift key pressed
+                if ( event.shiftKey || ( event.ctrlKey && event.shiftKey ) ) {
+                        return;
+                }
+
                 // The right arrow key.
                 if ( 39 === event.keyCode ) {

trunk/tests/qunit/index.html

@@ -148 +148 @@
                 <!-- Unit tests -->
                 <script src="wp-admin/js/password-strength-meter.js"></script>
+                <script src="wp-admin/js/theme.js"></script>
                 <script src="wp-admin/js/customize-base.js"></script>
                 <script src="wp-admin/js/customize-header.js"></script>