From c286c2774715fdb624d4a698db568521c2a7cb00 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Wed, 28 Sep 2016 04:19:37 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38668 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-nav-menus.js | 34 ++++++++++++++++----------
 src/wp-admin/js/customize-widgets.js   | 18 +++++++++-----
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index 9a3e2ffd6b..17793c741a 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/wp-admin/js/customize-nav-menus.js
@@ -1529,7 +1529,6 @@
 		 */
 		expandControlSection: function() {
 			var $section = this.container.closest( '.accordion-section' );
-
 			if ( ! $section.hasClass( 'open' ) ) {
 				$section.find( '.accordion-section-title:first' ).trigger( 'click' );
 			}
@@ -1683,23 +1682,33 @@
 		 */
 		focus: function( params ) {
 			params = params || {};
-			var control = this, originalCompleteCallback = params.completeCallback;
+			var control = this, originalCompleteCallback = params.completeCallback, focusControl;
 
-			control.expandControlSection();
+			focusControl = function() {
+				control.expandControlSection();
 
-			params.completeCallback = function() {
-				var focusable;
+				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();
+					// 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();
-				}
+					if ( originalCompleteCallback ) {
+						originalCompleteCallback();
+					}
+				};
+
+				control.expandForm( params );
 			};
 
-			control.expandForm( params );
+			if ( api.section.has( control.section() ) ) {
+				api.section( control.section() ).expand( {
+					completeCallback: focusControl
+				} );
+			} else {
+				focusControl();
+			}
 		},
 
 		/**
@@ -2955,7 +2964,6 @@
 	 */
 	api.Menus.focusMenuItemControl = function( menuItemId ) {
 		var control = api.Menus.getMenuItemControl( menuItemId );
-
 		if ( control ) {
 			control.focus();
 		}
diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index 7598023244..dc1ef823b3 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/wp-admin/js/customize-widgets.js
@@ -1325,7 +1325,7 @@
 		 * @param {Object} args  merged on top of this.defaultActiveArguments
 		 */
 		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.
 			if ( expanded ) {
@@ -1345,11 +1345,7 @@
 			$widget = this.container.find( 'div.widget:first' );
 			$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
 				api.control.each( function( otherControl ) {
@@ -1379,6 +1375,16 @@
 
 				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 {
 
 				complete = function() {