Administration: Hide mobile menu on focusout.

joedolson · joedolson · commit fe81c8fb358b · 2021-10-28T17:27:04.000Z
Closes the admin menu on mobile devices when keyboard focus moves outside of the menu or menu toggle elements. Improves the usability of the menu on mobile by allowing closure anywhere outside the menu rather than only on the toggle. Props kaneva, costdev, sabernhardt Fixes #53587. git-svn-id: https://develop.svn.wordpress.org/trunk@51946 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js
@@ -1695,6 +1695,25 @@ $( function() {
 				}
 			} );
 
+			// Close sidebar when focus moves outside of toggle and sidebar.
+			$( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function() {
+				var focusIsInToggle, focusIsInSidebar;
+
+				if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) ) {
+					return;
+				}
+
+				// A brief delay is required to allow focus to switch to another element.
+				setTimeout( function() {
+					focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], $( ':focus' )[0] );
+					focusIsInSidebar = $.contains( $( '#adminmenumain' )[0], $( ':focus' )[0] );
+
+					if ( ! focusIsInToggle && ! focusIsInSidebar ) {
+						$( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
+					}
+				}, 10 );
+			} );
+
 			// Add menu events.
 			$adminmenu.on( 'click.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
 				if ( ! $adminmenu.data('wp-responsive') ) {
