Changeset 38668

Timestamp:

09/28/2016 04:19:37 AM (7 years ago)

Author:

westonruter

Message:

Customize: Fix focusing on controls for widgets and nav menu items after [38648].

Shift-click on nav menu items was not expanding the nav menu section, and shift-clicking on widgets would not always result in focus being added to an element in the control's container.

See #34391.

Location:

trunk/src/wp-admin/js

Files:

• customize-nav-menus.js (modified) (3 diffs)
• customize-widgets.js (modified) (3 diffs)

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -1530 +1530 @@
         expandControlSection: function() {
             var $section = this.container.closest( '.accordion-section' );
-
             if ( ! $section.hasClass( 'open' ) ) {
                 $section.find( '.accordion-section-title:first' ).trigger( 'click' );
@@ -1684 +1683 @@
         focus: function( params ) {
             params = params || {};
-            var control = this, originalCompleteCallback = params.completeCallback;
-
-            control.expandControlSection();
-
-            params.completeCallback = function() {
-                var focusable;
-
-                // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
-                focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
-                focusable.first().focus();
-
-                if ( originalCompleteCallback ) {
-                    originalCompleteCallback();
-                }
+            var control = this, originalCompleteCallback = params.completeCallback, focusControl;
+
+            focusControl = function() {
+                control.expandControlSection();
+
+                params.completeCallback = function() {
+                    var focusable;
+
+                    // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
+                    focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
+                    focusable.first().focus();
+
+                    if ( originalCompleteCallback ) {
+                        originalCompleteCallback();
+                    }
+                };
+
+                control.expandForm( params );
             };
 
-            control.expandForm( params );
+            if ( api.section.has( control.section() ) ) {
+                api.section( control.section() ).expand( {
+                    completeCallback: focusControl
+                } );
+            } else {
+                focusControl();
+            }
         },
 
@@ -2956 +2965 @@
     api.Menus.focusMenuItemControl = function( menuItemId ) {
         var control = api.Menus.getMenuItemControl( menuItemId );
-
         if ( control ) {
             control.focus();

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

@@ -1326 +1326 @@
          */
         onChangeExpanded: function ( expanded, args ) {
-            var self = this, $widget, $inside, complete, prevComplete;
+            var self = this, $widget, $inside, complete, prevComplete, expandControl;
 
             self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
@@ -1346 +1346 @@
             $inside = $widget.find( '.widget-inside:first' );
 
-            if ( expanded ) {
-
-                if ( self.section() && api.section( self.section() ) ) {
-                    self.expandControlSection();
-                }
+            expandControl = function() {
 
                 // Close all other widget controls before expanding this one
@@ -1380 +1376 @@
                 self.container.trigger( 'expand' );
                 self.container.addClass( 'expanding' );
+            };
+
+            if ( expanded ) {
+                if ( api.section.has( self.section() ) ) {
+                    api.section( self.section() ).expand( {
+                        completeCallback: expandControl
+                    } );
+                } else {
+                    expandControl();
+                }
             } else {