From 7f4c80ffa485036ba60b4def477ede72effbe331 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 27 Aug 2020 17:31:22 +1000
Subject: [PATCH] Navigation screen: Select Navigation block when user clicks
 away

When a submenu is open, clicking outside the Navigation block should
close the submenu.
---
 .../navigation-editor/block-editor-area.js    | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js b/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
index e5cefd6b6117c..c675eaedccff8 100644
--- a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
+++ b/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
@@ -81,12 +81,33 @@ export default function BlockEditorArea( {
 		}
 	}, [ menuId ] );
 
-	// Select the navigation block when it becomes available
+	// Select the navigation block when it becomes available or when user clicks
+	// away from the navigation area.
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	useEffect( () => {
-		if ( rootBlockId ) {
-			selectBlock( rootBlockId );
-		}
+		const selectNavigation = () => {
+			if ( rootBlockId ) {
+				selectBlock( rootBlockId );
+			}
+		};
+
+		const detectClickOutside = ( event ) => {
+			const navigationContainer = document.querySelector(
+				'.wp-block-navigation'
+			);
+			if (
+				navigationContainer &&
+				! navigationContainer.contains( event.target )
+			) {
+				selectNavigation();
+			}
+		};
+
+		selectNavigation();
+
+		document.addEventListener( 'click', detectClickOutside );
+		return () =>
+			document.removeEventListener( 'click', detectClickOutside );
 	}, [ rootBlockId ] );
 
 	return (