From 3caac42ac013c0d9bab51567c3d6d01dcd1abca4 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Fri, 9 Dec 2016 06:15:15 +0000
Subject: [PATCH] Customize: Collapse available nav menu items panel when
 clicking outside over preview or over existing items.

Props rockwell15.
Fixes #38953.


git-svn-id: https://develop.svn.wordpress.org/trunk@39548 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-nav-menus.css | 4 ++++
 src/wp-admin/js/customize-nav-menus.js   | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index 6fe558d28f..a95c8fcb92 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -719,6 +719,10 @@ body.adding-menu-items #customize-preview {
 	opacity: 0.4;
 }
 
+body.adding-menu-items #customize-preview iframe {
+	pointer-events: none;
+}
+
 .menu-item-handle .spinner {
 	display: none;
 	float: left;
diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index b7556f6702..df696bd963 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/wp-admin/js/customize-nav-menus.js
@@ -665,12 +665,20 @@
 
 		// Opens the panel.
 		open: function( menuControl ) {
+			var panel = this, close;
+
 			this.currentMenuControl = menuControl;
 
 			this.itemSectionHeight();
 
 			$( 'body' ).addClass( 'adding-menu-items' );
 
+			close = function() {
+				panel.close();
+				$( this ).off( 'click', close );
+			};
+			$( '#customize-preview' ).on( 'click', close );
+
 			// Collapse all controls.
 			_( this.currentMenuControl.getMenuItemControls() ).each( function( control ) {
 				control.collapseForm();
@@ -1319,6 +1327,7 @@
 			this.container.find( '.menu-item-handle' ).on( 'click', function( e ) {
 				e.preventDefault();
 				e.stopPropagation();
+				api.Menus.availableMenuItemsPanel.close();
 				var menuControl = control.getMenuControl();
 				if ( menuControl.isReordering || menuControl.isSorting ) {
 					return;