Changeset 39120

Timestamp:

11/03/2016 06:18:35 AM (8 years ago)

Author:

westonruter

Message:

Customize: Prevent collapsing expanded panel/section/control when Esc is pressed on another closable UI element.

Prevents collapsing constructs when hitting Esc on a TinyMCE toolbar, lightbox, or expanded color picker.

See #22237.
Fixes #38091.

File:

• trunk/src/wp-admin/js/customize-controls.js (modified) (5 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -1124 +1124 @@
 
             // Bind global keyboard events.
-            $( 'body' ).on( 'keyup', function( event ) {
+            section.container.on( 'keydown', function( event ) {
                 if ( ! section.overlay.find( '.theme-wrap' ).is( ':visible' ) ) {
                     return;
@@ -1142 +1142 @@
                 if ( 27 === event.keyCode ) {
                     section.closeDetails();
+                    event.stopPropagation(); // Prevent section from being collapsed.
                 }
             });
@@ -2865 +2866 @@
             }
 
-            this.setting.bind( function ( value ) {
+            control.setting.bind( function ( value ) {
                 // bail if the update came from the control itself
                 if ( updating ) {
@@ -2872 +2873 @@
                 picker.val( value );
                 picker.wpColorPicker( 'color', value );
+            } );
+
+            // Collapse color picker when hitting Esc instead of collapsing the current section.
+            control.container.on( 'keydown', function( event ) {
+                var pickerContainer;
+                if ( 27 !== event.which ) { // Esc.
+                    return;
+                }
+                pickerContainer = control.container.find( '.wp-picker-container' );
+                if ( pickerContainer.hasClass( 'wp-picker-active' ) ) {
+                    picker.wpColorPicker( 'close' );
+                    control.container.find( '.wp-color-result' ).focus();
+                    event.stopPropagation(); // Prevent section from being collapsed.
+                }
             } );
         }
@@ -5302 +5317 @@
             }
 
+            /*
+             * Abort if the event target is not the body (the default) and not inside of #customize-controls.
+             * This ensures that ESC meant to collapse a modal dialog or a TinyMCE toolbar won't collapse something else.
+             */
+            if ( ! $( event.target ).is( 'body' ) && ! $.contains( $( '#customize-controls' )[0], event.target ) ) {
+                return;
+            }
+
             // Check for expanded expandable controls (e.g. widgets and nav menus items), sections, and panels.
             api.control.each( function( control ) {