Edit navigation menu actions: use Popover s new anchor prop

WordPress · Sep 2, 2022 · eebd2e2 · eebd2e2
1 parent 842d882
commit eebd2e2
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/edit-navigation/src/components/header/menu-actions.js b/packages/edit-navigation/src/components/header/menu-actions.js
@@ -7,7 +7,7 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -19,11 +19,15 @@ import { useMenuEntityProp, useSelectedMenuId } from '../../hooks';
 export default function MenuActions( { menus, isLoading } ) {
 	const [ selectedMenuId, setSelectedMenuId ] = useSelectedMenuId();
 	const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
 
 	// The title ref is passed to the popover as the anchorRef so that the
 	// dropdown is centered over the whole title area rather than just one
 	// part of it.
-	const titleRef = useRef();
+	const titleCallbackRef = useCallback( ( node ) => {
+		// The popover `anchor` prop can not be `null`.
+		setPopoverAnchor( node ?? undefined );
+	}, [] );
 
 	if ( isLoading ) {
 		return (
@@ -36,7 +40,7 @@ export default function MenuActions( { menus, isLoading } ) {
 	return (
 		<div className="edit-navigation-menu-actions">
 			<div
-				ref={ titleRef }
+				ref={ titleCallbackRef }
 				className="edit-navigation-menu-actions__subtitle-wrapper"
 			>
 				<Text
@@ -63,7 +67,7 @@ export default function MenuActions( { menus, isLoading } ) {
 						className:
 							'edit-navigation-menu-actions__switcher-dropdown',
 						position: 'bottom center',
-						anchorRef: titleRef.current,
+						anchor: popoverAnchor,
 					} }
 				>
 					{ ( { onClose } ) => (