From fe81c8fb358baf46d20ddc85bb0a03e6c5a97aef Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Thu, 28 Oct 2021 17:27:04 +0000
Subject: [PATCH] Administration: Hide mobile menu on focusout.

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
---
 src/js/_enqueues/admin/common.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js
index 636237f0b4..9c583f3d79 100644
--- 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') ) {