Fix create menu after menu switch

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

@@ -154,7 +154,10 @@ function Navigation( {
 	} = useCreateNavigationMenu( clientId );
 
 	const createUntitledEmptyNavigationMenu = () => {
-		createNavigationMenu( '' );
+		return new Promise( async ( resolve ) => {
+			await createNavigationMenu( '' );
+			resolve();
+		} );
 	};
 
 	const {
@@ -342,20 +345,28 @@ function Navigation( {
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
 	const onSelectClassicMenu = async ( classicMenu ) => {
-		const navMenu = await convertClassicMenu(
-			classicMenu.id,
-			classicMenu.name,
-			'draft'
-		);
-		if ( navMenu ) {
-			handleUpdateMenu( navMenu.id, {
-				focusNavigationBlock: true,
-			} );
-		}
+		return new Promise( async ( resolve ) => {
+			const navMenu = await convertClassicMenu(
+				classicMenu.id,
+				classicMenu.name,
+				'draft'
+			);
+			if ( navMenu ) {
+				handleUpdateMenu( navMenu.id, {
+					focusNavigationBlock: true,
+				} );
+			}
+			resolve();
+		} );
 	};
 
 	const onSelectNavigationMenu = ( menuId ) => {
-		handleUpdateMenu( menuId );
+		return new Promise( ( resolve ) => {
+			handleUpdateMenu( menuId, {
+				focusNavigationBlock: true,
+			} );
+			resolve();
+		} );
 	};
 
 	useEffect( () => {

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

@@ -49,7 +49,7 @@ function NavigationMenuSelector( {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
-	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+	const [ isUpdatingMenuRef, setIsUpdatingMenuRef ] = useState( false );
 
 	actionLabel = actionLabel || createActionLabel;
 
@@ -99,7 +99,7 @@ function NavigationMenuSelector( {
 
 	let selectorLabel = '';
 
-	if ( isCreatingMenu || isResolvingNavigationMenus ) {
+	if ( isResolvingNavigationMenus ) {
 		selectorLabel = __( 'Loading…' );
 	} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
 		// Note: classic Menus may be available.
@@ -111,17 +111,17 @@ function NavigationMenuSelector( {
 
 	useEffect( () => {
 		if (
-			isCreatingMenu &&
+			isUpdatingMenuRef &&
 			( createNavigationMenuIsSuccess || createNavigationMenuIsError )
 		) {
-			setIsCreatingMenu( false );
+			setIsUpdatingMenuRef( false );
 		}
 	}, [
 		hasResolvedNavigationMenus,
 		createNavigationMenuIsSuccess,
 		canUserCreateNavigationMenu,
 		createNavigationMenuIsError,
-		isCreatingMenu,
+		isUpdatingMenuRef,
 		menuUnavailable,
 		noBlockMenus,
 		noMenuSelected,
@@ -140,12 +140,19 @@ function NavigationMenuSelector( {
 							<MenuItemsChoice
 								value={ currentMenuId }
 								onSelect={ ( menuId ) => {
-									setIsCreatingMenu( true );
-									onSelectNavigationMenu( menuId );
-									onClose();
+									setIsUpdatingMenuRef( true );
+									onSelectNavigationMenu( menuId ).then(
+										() => {
+											setIsUpdatingMenuRef( false );
+											onClose();
+										}
+									);
 								} }
 								choices={ menuChoices }
-								disabled={ isCreatingMenu }
+								disabled={
+									isUpdatingMenuRef ||
+									! hasResolvedNavigationMenus
+								}
 							/>
 						</MenuGroup>
 					) }
@@ -156,16 +163,25 @@ function NavigationMenuSelector( {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setIsCreatingMenu( true );
-											onSelectClassicMenu( menu );
-											onClose();
+											setIsUpdatingMenuRef( true );
+											onSelectClassicMenu( menu ).then(
+												() => {
+													setIsUpdatingMenuRef(
+														false
+													);
+													onClose();
+												}
+											);
 										} }
 										key={ menu.id }
 										aria-label={ sprintf(
 											createActionLabel,
 											label
 										) }
-										disabled={ isCreatingMenu }
+										disabled={
+											isUpdatingMenuRef ||
+											! hasResolvedNavigationMenus
+										}
 									>
 										{ label }
 									</MenuItem>
@@ -177,11 +193,16 @@ function NavigationMenuSelector( {
 					{ canUserCreateNavigationMenu && (
 						<MenuGroup label={ __( 'Tools' ) }>
 							<MenuItem
-								disabled={ isCreatingMenu }
+								disabled={
+									isUpdatingMenuRef ||
+									! hasResolvedNavigationMenus
+								}
 								onClick={ () => {
-									onClose();
-									onCreateNew();
-									setIsCreatingMenu( true );
+									setIsUpdatingMenuRef( true );
+									onCreateNew().then( () => {
+										setIsUpdatingMenuRef( false );
+										onClose();
+									} );
 								} }
 							>
 								{ __( 'Create new menu' ) }

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

@@ -34,7 +34,7 @@
 	},
 	status: 'publish',
 };
 const navigationMenu2 = {
 	id: 2,
 	title: {
 		rendered: 'Menu 2',
@@ -221,7 +221,12 @@
 
 			it( 'should call handler callback and close popover when create menu button is clicked', async () => {
 				const user = userEvent.setup();
-				const handler = jest.fn();
+				const handler = jest.fn(
+					() =>
+						new Promise( ( resolve ) => {
+							resolve();
+						} )
+				);
 
 				useNavigationMenu.mockReturnValue( {
 					navigationMenus: [],
@@ -248,7 +253,12 @@
 
 			it( 'should handle disabled state of the create menu button during the creation process', async () => {
 				const user = userEvent.setup();
-				const handler = jest.fn();
+				const handler = jest.fn(
+					() =>
+						new Promise( ( resolve ) => {
+							resolve();
+						} )
+				);
 
 				useNavigationMenu.mockReturnValue( {
 					navigationMenus: [],
@@ -425,7 +435,12 @@
 			it( 'should call the handler when the navigation menu is selected and disable all options during the import/creation process', async () => {
 				const user = userEvent.setup();
 
-				const handler = jest.fn();
+				const handler = jest.fn(
+					() =>
+						new Promise( ( resolve ) => {
+							resolve();
+						} )
+				);
 
 				useNavigationMenu.mockReturnValue( {
 					navigationMenus: navigationMenusFixture,
@@ -568,16 +583,23 @@
 
 			it( 'should call the handler when the classic menu item is selected and disable all options during the import/creation process', async () => {
 				const user = userEvent.setup();
-				const handler = jest.fn();
-
-				useNavigationMenu.mockReturnValue( {
-					canUserCreateNavigationMenu: true,
-				} );
+				const handler = jest.fn(
+					() =>
+						new Promise( ( resolve ) => {
+							resolve();
+						} )
+				);
 
 				useNavigationEntities.mockReturnValue( {
 					menus: classicMenusFixture,
 				} );
 
+				useNavigationMenu.mockReturnValue( {
+					canUserCreateNavigationMenu: true,
+					isResolvingNavigationMenus: false,
+					hasResolvedNavigationMenus: true,
+				} );
+
 				const { rerender } = render(
 					<NavigationMenuSelector onSelectClassicMenu={ handler } />
 				);
@@ -594,6 +616,16 @@
 
 				expect( handler ).toHaveBeenCalled();
 
+				useNavigationMenu.mockReturnValue( {
+					canUserCreateNavigationMenu: true,
+					isResolvingNavigationMenus: true,
+					hasResolvedNavigationMenus: false,
+				} );
+
+				rerender(
+					<NavigationMenuSelector onSelectClassicMenu={ handler } />
+				);
+
 				// Check the dropdown has been closed.
 				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 
@@ -613,6 +645,11 @@
 					expect( item ).toBeDisabled();
 				} );
 
+				useNavigationMenu.mockReturnValue( {
+					isResolvingNavigationMenus: false,
+					hasResolvedNavigationMenus: true,
+				} );
+
 				// Simulate the menu being created and component being re-rendered.
 				rerender(
 					<NavigationMenuSelector