Menu: Close non-modal menus on iframe interaction

packages/ui/CHANGELOG.md

@@ -46,6 +46,7 @@
 -   `Autocomplete.List`: Stop rendering `aria-orientation` in grid mode, where `role="grid"` disallows it ([#81853](https://github.com/WordPress/gutenberg/pull/81853)).
 -   `SearchableChipSelect`, `SearchableChipSelectControl`: Forward ref to the search input instead of the chips container ([#80980](https://github.com/WordPress/gutenberg/pull/80980)).
 -   `InputControl`: Hide the value-like placeholder Safari renders in empty date and time inputs (e.g. `12:30`), which was indistinguishable from a committed value ([#81991](https://github.com/WordPress/gutenberg/pull/81991)).
+-   `Menu`: Close non-modal menus when the user presses inside a same-origin iframe. ([#81952](https://github.com/WordPress/gutenberg/pull/81952))
 
 ### Documentation
 

packages/ui/src/menu/root.tsx

@@ -2,6 +2,7 @@ import { Menu as _Menu } from '@base-ui/react/menu';
 import { DirectionProvider } from '../utils/direction-provider';
 import { MenuContext } from './context';
 import type { RootProps } from './types';
+import { useIframeDismissalBridge } from './use-iframe-dismissal-bridge';
 
 /**
  * Groups all parts of a menu.
@@ -23,10 +24,10 @@ import type { RootProps } from './types';
  * ```
  */
 function Root( props: RootProps ) {
-	const { onOpenChange, ...rootProps } = props;
+	const { onOpenChange } = props;
 
 	const handleOpenChange: NonNullable< RootProps[ 'onOpenChange' ] > = (
-		open,
+		nextOpen,
 		eventDetails
 	) => {
 		const trigger = eventDetails.trigger;
@@ -40,10 +41,10 @@ function Root( props: RootProps ) {
 				? eventTarget.closest( '[role="menu"]' )
 				: null;
 
-		onOpenChange?.( open, eventDetails );
+		onOpenChange?.( nextOpen, eventDetails );
 
 		if (
-			! open &&
+			! nextOpen &&
 			eventDetails.reason === 'item-press' &&
 			! eventDetails.isCanceled &&
 			TriggerElement &&
@@ -61,14 +62,19 @@ function Root( props: RootProps ) {
 			trigger.focus();
 		}
 	};
+	const iframeDismissalProps = useIframeDismissalBridge( {
+		actionsRef: props.actionsRef,
+		defaultOpen: props.defaultOpen,
+		disabled: props.disabled,
+		modal: props.modal,
+		onOpenChange: handleOpenChange,
+		open: props.open,
+	} );
 
 	return (
 		<DirectionProvider>
 			<MenuContext.Provider value={ { isSubmenu: false } }>
-				<_Menu.Root
-					{ ...rootProps }
-					onOpenChange={ handleOpenChange }
-				/>
+				<_Menu.Root { ...props } { ...iframeDismissalProps } />
 			</MenuContext.Provider>
 		</DirectionProvider>
 	);