Navigation block: After choosing an option from Select Menu, focus after block rerender (#40390)

* Focus the select menu button after selection is made.

* Add E2E test.

* Add code comments to E2E test.

Author: alexstine

packages/block-library/src/navigation/edit/index.js

@@ -523,6 +523,11 @@ function Navigation( {
 		ref,
 	] );
 
+	const navigationSelectorRef = useRef();
+	const [
+		shouldFocusNavigationSelector,
+		setShouldFocusNavigationSelector,
+	] = useState( false );
 	const handleSelectNavigation = useCallback(
 		( navPostOrClassicMenu ) => {
 			if ( ! navPostOrClassicMenu ) {
@@ -538,10 +543,28 @@ function Navigation( {
 			} else {
 				handleUpdateMenu( navPostOrClassicMenu.id );
 			}
+			setShouldFocusNavigationSelector( true );
 		},
 		[ convert, handleUpdateMenu ]
 	);
 
+	// Focus support after menu selection.
+	useEffect( () => {
+		if (
+			isDraftNavigationMenu ||
+			! isEntityAvailable ||
+			! shouldFocusNavigationSelector
+		) {
+			return;
+		}
+		navigationSelectorRef?.current?.focus();
+		setShouldFocusNavigationSelector( false );
+	}, [
+		isDraftNavigationMenu,
+		isEntityAvailable,
+		shouldFocusNavigationSelector,
+	] );
+
 	const resetToEmptyBlock = useCallback( () => {
 		registry.batch( () => {
 			if ( navigationArea ) {
@@ -663,6 +686,7 @@ function Navigation( {
 					{ ! isDraftNavigationMenu && isEntityAvailable && (
 						<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
 							<NavigationMenuSelector
+								ref={ navigationSelectorRef }
 								currentMenuId={ ref }
 								clientId={ clientId }
 								onSelect={ handleSelectNavigation }

packages/block-library/src/navigation/edit/navigation-menu-selector.js

@@ -10,22 +10,25 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
-import { useCallback, useMemo } from '@wordpress/element';
+import { forwardRef, useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
-export default function NavigationMenuSelector( {
-	currentMenuId,
-	onSelect,
-	onCreateNew,
-	showManageActions = false,
-	actionLabel,
-	toggleProps = {},
-} ) {
+function NavigationMenuSelector(
+	{
+		currentMenuId,
+		onSelect,
+		onCreateNew,
+		showManageActions = false,
+		actionLabel,
+		toggleProps = {},
+	},
+	forwardedRef
+) {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -92,6 +95,7 @@ export default function NavigationMenuSelector( {
 
 	return (
 		<ToolbarDropdownMenu
+			ref={ forwardedRef }
 			label={ __( 'Select Menu' ) }
 			text={ __( 'Select Menu' ) }
 			icon={ null }
@@ -152,3 +156,5 @@ export default function NavigationMenuSelector( {
 		</ToolbarDropdownMenu>
 	);
 }
+
+export default forwardRef( NavigationMenuSelector );

packages/e2e-tests/specs/editor/blocks/navigation.test.js

@@ -1429,5 +1429,43 @@ describe( 'Navigation', () => {
 				'//*[contains(@class, "components-snackbar")]/*[text()="Navigation Menu successfully created."]'
 			);
 		} );
+
+		it( 'should always focus select menu button after item selection', async () => {
+			// Create some navigation menus to work with.
+			await createNavigationMenu( {
+				title: 'Example Navigation',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
+			} );
+			await createNavigationMenu( {
+				title: 'Second Example Navigation',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
+			} );
+
+			// Create new post.
+			await createNewPost();
+
+			// Insert new block and wait for the insert to complete.
+			await insertBlock( 'Navigation' );
+			await waitForBlock( 'Navigation' );
+			await page.waitForXPath( START_EMPTY_XPATH );
+
+			// Change menus via the select menu toolbar button.
+			const selectMenuDropdown = await page.waitForSelector(
+				'[aria-label="Select Menu"]'
+			);
+			await selectMenuDropdown.click();
+			const exampleNavigationOption = await page.waitForXPath(
+				'//span[contains(text(), "Second Example Navigation")]'
+			);
+			await exampleNavigationOption.click();
+
+			// Once the options are closed, does select menu button receive focus?
+			const selectMenuDropdown2 = await page.waitForSelector(
+				'[aria-label="Select Menu"]'
+			);
+			await expect( selectMenuDropdown2 ).toHaveFocus();
+		} );
 	} );
 } );