From c10964f44836a07512668fab2e3cc69419620ed8 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Sat, 22 Aug 2026 01:41:51 +0200
Subject: [PATCH 1/4] Menu: Close non-modal menus on iframe interaction

---
 packages/ui/src/menu/root.tsx                 |  58 ++++-
 .../ui/src/menu/stories/e2e/index.story.tsx   |  38 ++++
 packages/ui/src/menu/test/index.test.tsx      | 211 ++++++++++++++++++
 .../menu/use-close-on-iframe-pointer-down.ts  | 113 ++++++++++
 test/storybook-playwright/specs/menu.spec.ts  |  84 +++++++
 5 files changed, 500 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/menu/stories/e2e/index.story.tsx
 create mode 100644 packages/ui/src/menu/use-close-on-iframe-pointer-down.ts
 create mode 100644 test/storybook-playwright/specs/menu.spec.ts

diff --git a/packages/ui/src/menu/root.tsx b/packages/ui/src/menu/root.tsx
index aba7a0c3f15376..6b4d6d2081f090 100644
--- a/packages/ui/src/menu/root.tsx
+++ b/packages/ui/src/menu/root.tsx
@@ -1,7 +1,14 @@
 import { Menu as _Menu } from '@base-ui/react/menu';
+import {
+	useCallback,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { DirectionProvider } from '../utils/direction-provider';
 import { MenuContext } from './context';
 import type { RootProps } from './types';
+import { useCloseOnIframePointerDown } from './use-close-on-iframe-pointer-down';
 
 /**
  * Groups all parts of a menu.
@@ -23,10 +30,42 @@ import type { RootProps } from './types';
  * ```
  */
 function Root( props: RootProps ) {
-	const { onOpenChange, ...rootProps } = props;
+	const {
+		actionsRef,
+		defaultOpen,
+		modal,
+		onOpenChange,
+		open: openProp,
+		...rootProps
+	} = props;
+	const internalActionsRef = useRef< _Menu.Root.Actions | null >( null );
+	const [ uncontrolledOpen, setUncontrolledOpen ] = useState(
+		defaultOpen ?? false
+	);
+	const [ ownerDocument, setOwnerDocument ] = useState< Document | null >(
+		() => ( typeof document === 'undefined' ? null : document )
+	);
+	const open = openProp ?? uncontrolledOpen;
+	const close = useCallback( () => {
+		internalActionsRef.current?.close();
+	}, [] );
+
+	useImperativeHandle(
+		actionsRef,
+		() => ( {
+			close,
+			unmount: () => internalActionsRef.current?.unmount(),
+		} ),
+		[ close ]
+	);
+	useCloseOnIframePointerDown( {
+		enabled: open && modal === false,
+		onPointerDown: close,
+		ownerDocument,
+	} );
 
 	const handleOpenChange: NonNullable< RootProps[ 'onOpenChange' ] > = (
-		open,
+		nextOpen,
 		eventDetails
 	) => {
 		const trigger = eventDetails.trigger;
@@ -40,10 +79,17 @@ function Root( props: RootProps ) {
 				? eventTarget.closest( '[role="menu"]' )
 				: null;
 
-		onOpenChange?.( open, eventDetails );
+		onOpenChange?.( nextOpen, eventDetails );
+
+		if ( ! eventDetails.isCanceled ) {
+			setUncontrolledOpen( nextOpen );
+			if ( nextOpen && trigger ) {
+				setOwnerDocument( trigger.ownerDocument );
+			}
+		}
 
 		if (
-			! open &&
+			! nextOpen &&
 			eventDetails.reason === 'item-press' &&
 			! eventDetails.isCanceled &&
 			TriggerElement &&
@@ -67,7 +113,11 @@ function Root( props: RootProps ) {
 			<MenuContext.Provider value={ { isSubmenu: false } }>
 				<_Menu.Root
 					{ ...rootProps }
+					actionsRef={ internalActionsRef }
+					defaultOpen={ defaultOpen }
+					modal={ modal }
 					onOpenChange={ handleOpenChange }
+					open={ openProp }
 				/>
 			</MenuContext.Provider>
 		</DirectionProvider>
diff --git a/packages/ui/src/menu/stories/e2e/index.story.tsx b/packages/ui/src/menu/stories/e2e/index.story.tsx
new file mode 100644
index 00000000000000..f41e90c6270e6a
--- /dev/null
+++ b/packages/ui/src/menu/stories/e2e/index.story.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Menu from '../..';
+
+const meta: Meta< typeof Menu.Root > = {
+	title: 'Design System/Components/Menu',
+	component: Menu.Root,
+};
+
+export default meta;
+
+type Story = StoryObj< typeof Menu.Root >;
+
+export const NonModalWithIframe: Story = {
+	render: () => (
+		<>
+			<Menu.Root modal={ false }>
+				<Menu.Trigger>Open menu</Menu.Trigger>
+				<Menu.Popup>
+					<Menu.Item>
+						<Menu.ItemLabel>First action</Menu.ItemLabel>
+					</Menu.Item>
+					<Menu.Item>
+						<Menu.ItemLabel>Second action</Menu.ItemLabel>
+					</Menu.Item>
+				</Menu.Popup>
+			</Menu.Root>
+			<button type="button">Parent target</button>
+			<iframe
+				title="Editor canvas one"
+				srcDoc="<button type='button'>Canvas target one</button>"
+			/>
+			<iframe
+				title="Editor canvas two"
+				srcDoc="<button type='button'>Canvas target two</button>"
+			/>
+		</>
+	),
+};
diff --git a/packages/ui/src/menu/test/index.test.tsx b/packages/ui/src/menu/test/index.test.tsx
index aa2b178755537d..67bd453b4ab512 100644
--- a/packages/ui/src/menu/test/index.test.tsx
+++ b/packages/ui/src/menu/test/index.test.tsx
@@ -140,6 +140,34 @@ describe( 'Menu', () => {
 		expect( triggerWithPayload ).toBeDefined();
 	} );
 
+	it( 'preserves the public imperative actions ref', async () => {
+		const user = userEvent.setup();
+		const actionsRef = createRef< {
+			close: () => void;
+			unmount: () => void;
+		} >();
+
+		render(
+			<Menu.Root actionsRef={ actionsRef }>
+				<Menu.Trigger>Actions</Menu.Trigger>
+				<Menu.Popup>
+					<Menu.Item>
+						<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+					</Menu.Item>
+				</Menu.Popup>
+			</Menu.Root>
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+
+		act( () => actionsRef.current?.close() );
+
+		await waitFor( () => {
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
 	it( 'closes when Escape is pressed', async () => {
 		const user = userEvent.setup();
 
@@ -167,6 +195,189 @@ describe( 'Menu', () => {
 		).toHaveFocus();
 	} );
 
+	it( 'closes a non-modal menu without consuming an iframe pointer interaction', async () => {
+		const user = userEvent.setup();
+		const onCanvasClick = jest.fn();
+
+		render(
+			<>
+				<Menu.Root modal={ false }>
+					<Menu.Trigger>Actions</Menu.Trigger>
+					<Menu.Popup>
+						<Menu.Item>
+							<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+				<iframe title="Editor canvas" />
+			</>
+		);
+
+		const iframe = screen.getByTitle( 'Editor canvas' );
+		const iframeDocument = document.implementation.createHTMLDocument();
+		Object.defineProperty( iframe, 'contentDocument', {
+			configurable: true,
+			get: () => iframeDocument,
+		} );
+		const canvasTarget = iframeDocument.createElement( 'button' );
+		canvasTarget.addEventListener( 'click', onCanvasClick );
+		iframeDocument.body.appendChild( canvasTarget );
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+
+		act( () => {
+			canvasTarget.dispatchEvent(
+				new MouseEvent( 'pointerdown', { bubbles: true } )
+			);
+			canvasTarget.click();
+		} );
+
+		await waitFor( () => {
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+		expect( onCanvasClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'reattaches the iframe listener after reload and removes it when closed', async () => {
+		const user = userEvent.setup();
+
+		const { unmount } = render(
+			<>
+				<Menu.Root modal={ false }>
+					<Menu.Trigger>Actions</Menu.Trigger>
+					<Menu.Popup>
+						<Menu.Item>
+							<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+				<iframe title="Editor canvas" />
+			</>
+		);
+
+		const iframe = screen.getByTitle( 'Editor canvas' );
+		const firstDocument = document.implementation.createHTMLDocument();
+		const reloadedDocument = document.implementation.createHTMLDocument();
+		let iframeDocument = firstDocument;
+		Object.defineProperty( iframe, 'contentDocument', {
+			configurable: true,
+			get: () => iframeDocument,
+		} );
+		const firstRemoveEventListener = jest.spyOn(
+			firstDocument,
+			'removeEventListener'
+		);
+		const reloadedAddEventListener = jest.spyOn(
+			reloadedDocument,
+			'addEventListener'
+		);
+		const reloadedRemoveEventListener = jest.spyOn(
+			reloadedDocument,
+			'removeEventListener'
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+
+		iframeDocument = reloadedDocument;
+		act( () => iframe.dispatchEvent( new Event( 'load' ) ) );
+
+		expect( firstRemoveEventListener ).toHaveBeenCalledWith(
+			'pointerdown',
+			expect.any( Function ),
+			true
+		);
+		expect( reloadedAddEventListener ).toHaveBeenCalledWith(
+			'pointerdown',
+			expect.any( Function ),
+			true
+		);
+
+		await user.keyboard( '{Escape}' );
+		await waitFor( () => {
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+		expect( reloadedRemoveEventListener ).toHaveBeenCalledWith(
+			'pointerdown',
+			expect.any( Function ),
+			true
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+		unmount();
+		expect( reloadedRemoveEventListener ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'moves the listener when an iframe remounts while the menu is open', async () => {
+		const user = userEvent.setup();
+
+		function MenuWithIframe( { iframeKey }: { iframeKey: string } ) {
+			return (
+				<>
+					<Menu.Root modal={ false }>
+						<Menu.Trigger>Actions</Menu.Trigger>
+						<Menu.Popup>
+							<Menu.Item>
+								<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popup>
+					</Menu.Root>
+					<iframe key={ iframeKey } title="Editor canvas" />
+				</>
+			);
+		}
+
+		const { rerender } = render( <MenuWithIframe iframeKey="first" /> );
+		const firstIframe = screen.getByTitle( 'Editor canvas' );
+		const firstDocument = document.implementation.createHTMLDocument();
+		Object.defineProperty( firstIframe, 'contentDocument', {
+			configurable: true,
+			get: () => firstDocument,
+		} );
+		const firstRemoveEventListener = jest.spyOn(
+			firstDocument,
+			'removeEventListener'
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+
+		rerender( <MenuWithIframe iframeKey="second" /> );
+		await waitFor( () => {
+			expect( firstRemoveEventListener ).toHaveBeenCalledWith(
+				'pointerdown',
+				expect.any( Function ),
+				true
+			);
+		} );
+
+		act( () => {
+			firstDocument.dispatchEvent(
+				new MouseEvent( 'pointerdown', { bubbles: true } )
+			);
+		} );
+		expect( screen.getByRole( 'menu' ) ).toBeVisible();
+
+		const secondIframe = screen.getByTitle( 'Editor canvas' );
+		const secondDocument = document.implementation.createHTMLDocument();
+		Object.defineProperty( secondIframe, 'contentDocument', {
+			configurable: true,
+			get: () => secondDocument,
+		} );
+		act( () => secondIframe.dispatchEvent( new Event( 'load' ) ) );
+		act( () => {
+			secondDocument.dispatchEvent(
+				new MouseEvent( 'pointerdown', { bubbles: true } )
+			);
+		} );
+
+		await waitFor( () => {
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
 	it.each( [
 		{ location: 'root menu', nested: false, checkbox: false },
 		{ location: 'submenu', nested: true, checkbox: false },
diff --git a/packages/ui/src/menu/use-close-on-iframe-pointer-down.ts b/packages/ui/src/menu/use-close-on-iframe-pointer-down.ts
new file mode 100644
index 00000000000000..ae5d458fdf77f8
--- /dev/null
+++ b/packages/ui/src/menu/use-close-on-iframe-pointer-down.ts
@@ -0,0 +1,113 @@
+import { useEffect } from '@wordpress/element';
+
+function getIframeDocument( iframe: HTMLIFrameElement ) {
+	try {
+		return iframe.contentDocument;
+	} catch {
+		return null;
+	}
+}
+
+function forEachIframe(
+	node: Node,
+	callback: ( iframe: HTMLIFrameElement ) => void
+) {
+	if ( node.nodeType !== Node.ELEMENT_NODE ) {
+		return;
+	}
+
+	const element = node as Element;
+	if ( element.tagName === 'IFRAME' ) {
+		callback( element as HTMLIFrameElement );
+	}
+	element.querySelectorAll( 'iframe' ).forEach( callback );
+}
+
+/*
+ * Base UI listens for outside presses only in the menu's owner document.
+ * Pointer events do not cross document boundaries, so listen in same-origin
+ * iframe documents without redispatching or consuming the original event.
+ */
+export function useCloseOnIframePointerDown( {
+	enabled,
+	onPointerDown,
+	ownerDocument,
+}: {
+	enabled: boolean;
+	onPointerDown: () => void;
+	ownerDocument: Document | null;
+} ) {
+	useEffect( () => {
+		if ( ! enabled || ! ownerDocument ) {
+			return;
+		}
+
+		const iframeCleanups = new Map< HTMLIFrameElement, () => void >();
+		const addIframe = ( iframe: HTMLIFrameElement ) => {
+			if ( iframeCleanups.has( iframe ) ) {
+				return;
+			}
+
+			let iframeDocument: Document | null = null;
+			const updateIframeDocument = () => {
+				const nextIframeDocument = getIframeDocument( iframe );
+				if ( nextIframeDocument === iframeDocument ) {
+					return;
+				}
+
+				iframeDocument?.removeEventListener(
+					'pointerdown',
+					onPointerDown,
+					true
+				);
+				iframeDocument = nextIframeDocument;
+				iframeDocument?.addEventListener(
+					'pointerdown',
+					onPointerDown,
+					true
+				);
+			};
+
+			iframe.addEventListener( 'load', updateIframeDocument );
+			updateIframeDocument();
+			iframeCleanups.set( iframe, () => {
+				iframe.removeEventListener( 'load', updateIframeDocument );
+				iframeDocument?.removeEventListener(
+					'pointerdown',
+					onPointerDown,
+					true
+				);
+			} );
+		};
+		const removeIframe = ( iframe: HTMLIFrameElement ) => {
+			iframeCleanups.get( iframe )?.();
+			iframeCleanups.delete( iframe );
+		};
+
+		ownerDocument.querySelectorAll( 'iframe' ).forEach( addIframe );
+
+		const MutationObserverConstructor =
+			ownerDocument.defaultView?.MutationObserver;
+		const observer = MutationObserverConstructor
+			? new MutationObserverConstructor( ( records ) => {
+					records.forEach( ( record ) => {
+						record.removedNodes.forEach( ( node ) =>
+							forEachIframe( node, removeIframe )
+						);
+						record.addedNodes.forEach( ( node ) =>
+							forEachIframe( node, addIframe )
+						);
+					} );
+			  } )
+			: null;
+		observer?.observe( ownerDocument.documentElement, {
+			childList: true,
+			subtree: true,
+		} );
+
+		return () => {
+			observer?.disconnect();
+			iframeCleanups.forEach( ( cleanup ) => cleanup() );
+		};
+	}, [ enabled, onPointerDown, ownerDocument ] );
+}
diff --git a/test/storybook-playwright/specs/menu.spec.ts b/test/storybook-playwright/specs/menu.spec.ts
new file mode 100644
index 00000000000000..82261dc57cd8e3
--- /dev/null
+++ b/test/storybook-playwright/specs/menu.spec.ts
@@ -0,0 +1,84 @@
+import { expect, test } from '@playwright/test';
+import { gotoStoryId } from '../utils';
+
+test.describe( 'Menu', () => {
+	test.beforeEach( async ( { page } ) => {
+		await gotoStoryId(
+			page,
+			'design-system-components-menu--non-modal-with-iframe'
+		);
+	} );
+
+	test( 'one iframe click closes a non-modal menu and activates the target', async ( {
+		page,
+	} ) => {
+		await page.getByRole( 'button', { name: 'Open menu' } ).click();
+		await expect( page.getByRole( 'menu' ) ).toBeVisible();
+
+		const canvasTarget = page
+			.frameLocator( 'iframe[title="Editor canvas two"]' )
+			.getByRole( 'button', { name: 'Canvas target two' } );
+		await canvasTarget.evaluate( ( target ) => {
+			target.addEventListener( 'click', () => {
+				target.setAttribute( 'data-activated', 'true' );
+			} );
+		} );
+
+		await canvasTarget.click();
+
+		await expect( canvasTarget ).toHaveAttribute(
+			'data-activated',
+			'true'
+		);
+		await expect( canvasTarget ).toBeFocused();
+		await expect( page.getByRole( 'menu' ) ).toBeHidden();
+	} );
+
+	test( 'one parent-document click closes a non-modal menu and activates the target', async ( {
+		page,
+	} ) => {
+		await page.getByRole( 'button', { name: 'Open menu' } ).click();
+		await expect( page.getByRole( 'menu' ) ).toBeVisible();
+
+		const parentTarget = page.getByRole( 'button', {
+			name: 'Parent target',
+		} );
+		await parentTarget.evaluate( ( target ) => {
+			target.addEventListener( 'click', () => {
+				target.setAttribute( 'data-activated', 'true' );
+			} );
+		} );
+
+		await parentTarget.click();
+
+		await expect( page.getByRole( 'menu' ) ).toBeHidden();
+		await expect( parentTarget ).toHaveAttribute(
+			'data-activated',
+			'true'
+		);
+		await expect( parentTarget ).toBeFocused();
+	} );
+
+	test( 'Escape and arrow-key navigation keep their expected behavior', async ( {
+		page,
+	} ) => {
+		const trigger = page.getByRole( 'button', { name: 'Open menu' } );
+		await trigger.focus();
+		await page.keyboard.press( 'Enter' );
+
+		const firstItem = page.getByRole( 'menuitem', {
+			name: 'First action',
+		} );
+		const secondItem = page.getByRole( 'menuitem', {
+			name: 'Second action',
+		} );
+		await expect( firstItem ).toBeFocused();
+
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( secondItem ).toBeFocused();
+
+		await page.keyboard.press( 'Escape' );
+		await expect( page.getByRole( 'menu' ) ).toBeHidden();
+		await expect( trigger ).toBeFocused();
+	} );
+} );

From c036d1c96a594b1913d2b606629422de9f73bf1b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Sat, 22 Aug 2026 01:43:53 +0200
Subject: [PATCH 2/4] UI: Add iframe menu dismissal changelog

---
 packages/ui/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 6a9ea82c2e0f8f..7a5f780f46ee64 100644
--- a/packages/ui/CHANGELOG.md
+++ b/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
 

From 3ef052511b63163c5fa83941567bf4829f85423f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Sat, 22 Aug 2026 14:31:43 +0200
Subject: [PATCH 3/4] Menu: Harden iframe dismissal bridge

---
 packages/ui/src/menu/root.tsx                 |  66 +-----
 .../ui/src/menu/stories/e2e/index.story.tsx   |  38 ----
 packages/ui/src/menu/test/index.test.tsx      | 143 +++++++++++--
 .../menu/use-close-on-iframe-pointer-down.ts  | 113 ----------
 .../src/menu/use-iframe-dismissal-bridge.ts   | 201 ++++++++++++++++++
 test/storybook-playwright/specs/menu.spec.ts  |  84 --------
 6 files changed, 341 insertions(+), 304 deletions(-)
 delete mode 100644 packages/ui/src/menu/stories/e2e/index.story.tsx
 delete mode 100644 packages/ui/src/menu/use-close-on-iframe-pointer-down.ts
 create mode 100644 packages/ui/src/menu/use-iframe-dismissal-bridge.ts
 delete mode 100644 test/storybook-playwright/specs/menu.spec.ts

diff --git a/packages/ui/src/menu/root.tsx b/packages/ui/src/menu/root.tsx
index 6b4d6d2081f090..eb5ee96cb9fc96 100644
--- a/packages/ui/src/menu/root.tsx
+++ b/packages/ui/src/menu/root.tsx
@@ -1,14 +1,8 @@
 import { Menu as _Menu } from '@base-ui/react/menu';
-import {
-	useCallback,
-	useImperativeHandle,
-	useRef,
-	useState,
-} from '@wordpress/element';
 import { DirectionProvider } from '../utils/direction-provider';
 import { MenuContext } from './context';
 import type { RootProps } from './types';
-import { useCloseOnIframePointerDown } from './use-close-on-iframe-pointer-down';
+import { useIframeDismissalBridge } from './use-iframe-dismissal-bridge';
 
 /**
  * Groups all parts of a menu.
@@ -30,39 +24,7 @@ import { useCloseOnIframePointerDown } from './use-close-on-iframe-pointer-down'
  * ```
  */
 function Root( props: RootProps ) {
-	const {
-		actionsRef,
-		defaultOpen,
-		modal,
-		onOpenChange,
-		open: openProp,
-		...rootProps
-	} = props;
-	const internalActionsRef = useRef< _Menu.Root.Actions | null >( null );
-	const [ uncontrolledOpen, setUncontrolledOpen ] = useState(
-		defaultOpen ?? false
-	);
-	const [ ownerDocument, setOwnerDocument ] = useState< Document | null >(
-		() => ( typeof document === 'undefined' ? null : document )
-	);
-	const open = openProp ?? uncontrolledOpen;
-	const close = useCallback( () => {
-		internalActionsRef.current?.close();
-	}, [] );
-
-	useImperativeHandle(
-		actionsRef,
-		() => ( {
-			close,
-			unmount: () => internalActionsRef.current?.unmount(),
-		} ),
-		[ close ]
-	);
-	useCloseOnIframePointerDown( {
-		enabled: open && modal === false,
-		onPointerDown: close,
-		ownerDocument,
-	} );
+	const { onOpenChange } = props;
 
 	const handleOpenChange: NonNullable< RootProps[ 'onOpenChange' ] > = (
 		nextOpen,
@@ -81,13 +43,6 @@ function Root( props: RootProps ) {
 
 		onOpenChange?.( nextOpen, eventDetails );
 
-		if ( ! eventDetails.isCanceled ) {
-			setUncontrolledOpen( nextOpen );
-			if ( nextOpen && trigger ) {
-				setOwnerDocument( trigger.ownerDocument );
-			}
-		}
-
 		if (
 			! nextOpen &&
 			eventDetails.reason === 'item-press' &&
@@ -107,18 +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 }
-					actionsRef={ internalActionsRef }
-					defaultOpen={ defaultOpen }
-					modal={ modal }
-					onOpenChange={ handleOpenChange }
-					open={ openProp }
-				/>
+				<_Menu.Root { ...props } { ...iframeDismissalProps } />
 			</MenuContext.Provider>
 		</DirectionProvider>
 	);
diff --git a/packages/ui/src/menu/stories/e2e/index.story.tsx b/packages/ui/src/menu/stories/e2e/index.story.tsx
deleted file mode 100644
index f41e90c6270e6a..00000000000000
--- a/packages/ui/src/menu/stories/e2e/index.story.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import * as Menu from '../..';
-
-const meta: Meta< typeof Menu.Root > = {
-	title: 'Design System/Components/Menu',
-	component: Menu.Root,
-};
-
-export default meta;
-
-type Story = StoryObj< typeof Menu.Root >;
-
-export const NonModalWithIframe: Story = {
-	render: () => (
-		<>
-			<Menu.Root modal={ false }>
-				<Menu.Trigger>Open menu</Menu.Trigger>
-				<Menu.Popup>
-					<Menu.Item>
-						<Menu.ItemLabel>First action</Menu.ItemLabel>
-					</Menu.Item>
-					<Menu.Item>
-						<Menu.ItemLabel>Second action</Menu.ItemLabel>
-					</Menu.Item>
-				</Menu.Popup>
-			</Menu.Root>
-			<button type="button">Parent target</button>
-			<iframe
-				title="Editor canvas one"
-				srcDoc="<button type='button'>Canvas target one</button>"
-			/>
-			<iframe
-				title="Editor canvas two"
-				srcDoc="<button type='button'>Canvas target two</button>"
-			/>
-		</>
-	),
-};
diff --git a/packages/ui/src/menu/test/index.test.tsx b/packages/ui/src/menu/test/index.test.tsx
index 67bd453b4ab512..4a9a3fdfeb39d4 100644
--- a/packages/ui/src/menu/test/index.test.tsx
+++ b/packages/ui/src/menu/test/index.test.tsx
@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useFocusReturn } from '@wordpress/compose';
 import {
@@ -199,19 +199,30 @@ describe( 'Menu', () => {
 		const user = userEvent.setup();
 		const onCanvasClick = jest.fn();
 
-		render(
-			<>
-				<Menu.Root modal={ false }>
-					<Menu.Trigger>Actions</Menu.Trigger>
-					<Menu.Popup>
-						<Menu.Item>
-							<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
-						</Menu.Item>
-					</Menu.Popup>
-				</Menu.Root>
-				<iframe title="Editor canvas" />
-			</>
-		);
+		function ControlledMenuWithIframes() {
+			const [ open, setOpen ] = useState( false );
+
+			return (
+				<>
+					<Menu.Root
+						modal={ false }
+						onOpenChange={ setOpen }
+						open={ open }
+					>
+						<Menu.Trigger>Actions</Menu.Trigger>
+						<Menu.Popup>
+							<Menu.Item>
+								<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popup>
+					</Menu.Root>
+					<iframe title="Secondary canvas" />
+					<iframe title="Editor canvas" />
+				</>
+			);
+		}
+
+		render( <ControlledMenuWithIframes /> );
 
 		const iframe = screen.getByTitle( 'Editor canvas' );
 		const iframeDocument = document.implementation.createHTMLDocument();
@@ -239,6 +250,110 @@ describe( 'Menu', () => {
 		expect( onCanvasClick ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	it( 'does not close for pointer interactions inside a menu portaled to an iframe', async () => {
+		const user = userEvent.setup();
+		const iframe = document.createElement( 'iframe' );
+		document.body.appendChild( iframe );
+		const iframeDocument = iframe.contentDocument;
+
+		if ( ! iframeDocument ) {
+			throw new Error( 'Expected a same-origin iframe document.' );
+		}
+
+		try {
+			const outsideTarget = iframeDocument.createElement( 'button' );
+			iframeDocument.body.appendChild( outsideTarget );
+
+			render(
+				<Menu.Root modal={ false }>
+					<Menu.Trigger>Actions</Menu.Trigger>
+					<Menu.Popup
+						portal={
+							<Menu.Portal container={ iframeDocument.body } />
+						}
+					>
+						<Menu.Item>
+							<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Actions' } )
+			);
+			const portaledMenu = await within( iframeDocument.body ).findByRole(
+				'menu'
+			);
+			const item = within( portaledMenu ).getByRole( 'menuitem', {
+				name: 'Duplicate',
+			} );
+
+			act( () => {
+				item.dispatchEvent(
+					new MouseEvent( 'pointerdown', { bubbles: true } )
+				);
+			} );
+			expect( portaledMenu ).toBeVisible();
+
+			act( () => {
+				outsideTarget.dispatchEvent(
+					new MouseEvent( 'pointerdown', { bubbles: true } )
+				);
+			} );
+			await waitFor( () => {
+				expect( portaledMenu ).not.toBeInTheDocument();
+			} );
+		} finally {
+			iframe.remove();
+		}
+	} );
+
+	it( 'does not close a disabled non-modal menu on iframe pointerdown', async () => {
+		const user = userEvent.setup();
+
+		function MenuDisabledWhileOpen() {
+			const [ open, setOpen ] = useState( false );
+
+			return (
+				<>
+					<Menu.Root
+						disabled={ open }
+						modal={ false }
+						onOpenChange={ setOpen }
+						open={ open }
+					>
+						<Menu.Trigger>Actions</Menu.Trigger>
+						<Menu.Popup>
+							<Menu.Item>
+								<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popup>
+					</Menu.Root>
+					<iframe title="Editor canvas" />
+				</>
+			);
+		}
+
+		render( <MenuDisabledWhileOpen /> );
+		const iframe = screen.getByTitle( 'Editor canvas' );
+		const iframeDocument = document.implementation.createHTMLDocument();
+		Object.defineProperty( iframe, 'contentDocument', {
+			configurable: true,
+			get: () => iframeDocument,
+		} );
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+
+		act( () => {
+			iframeDocument.dispatchEvent(
+				new MouseEvent( 'pointerdown', { bubbles: true } )
+			);
+		} );
+		expect( screen.getByRole( 'menu' ) ).toBeVisible();
+	} );
+
 	it( 'reattaches the iframe listener after reload and removes it when closed', async () => {
 		const user = userEvent.setup();
 
diff --git a/packages/ui/src/menu/use-close-on-iframe-pointer-down.ts b/packages/ui/src/menu/use-close-on-iframe-pointer-down.ts
deleted file mode 100644
index ae5d458fdf77f8..00000000000000
--- a/packages/ui/src/menu/use-close-on-iframe-pointer-down.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useEffect } from '@wordpress/element';
-
-function getIframeDocument( iframe: HTMLIFrameElement ) {
-	try {
-		return iframe.contentDocument;
-	} catch {
-		return null;
-	}
-}
-
-function forEachIframe(
-	node: Node,
-	callback: ( iframe: HTMLIFrameElement ) => void
-) {
-	if ( node.nodeType !== Node.ELEMENT_NODE ) {
-		return;
-	}
-
-	const element = node as Element;
-	if ( element.tagName === 'IFRAME' ) {
-		callback( element as HTMLIFrameElement );
-	}
-	element.querySelectorAll( 'iframe' ).forEach( callback );
-}
-
-/*
- * Base UI listens for outside presses only in the menu's owner document.
- * Pointer events do not cross document boundaries, so listen in same-origin
- * iframe documents without redispatching or consuming the original event.
- */
-export function useCloseOnIframePointerDown( {
-	enabled,
-	onPointerDown,
-	ownerDocument,
-}: {
-	enabled: boolean;
-	onPointerDown: () => void;
-	ownerDocument: Document | null;
-} ) {
-	useEffect( () => {
-		if ( ! enabled || ! ownerDocument ) {
-			return;
-		}
-
-		const iframeCleanups = new Map< HTMLIFrameElement, () => void >();
-		const addIframe = ( iframe: HTMLIFrameElement ) => {
-			if ( iframeCleanups.has( iframe ) ) {
-				return;
-			}
-
-			let iframeDocument: Document | null = null;
-			const updateIframeDocument = () => {
-				const nextIframeDocument = getIframeDocument( iframe );
-				if ( nextIframeDocument === iframeDocument ) {
-					return;
-				}
-
-				iframeDocument?.removeEventListener(
-					'pointerdown',
-					onPointerDown,
-					true
-				);
-				iframeDocument = nextIframeDocument;
-				iframeDocument?.addEventListener(
-					'pointerdown',
-					onPointerDown,
-					true
-				);
-			};
-
-			iframe.addEventListener( 'load', updateIframeDocument );
-			updateIframeDocument();
-			iframeCleanups.set( iframe, () => {
-				iframe.removeEventListener( 'load', updateIframeDocument );
-				iframeDocument?.removeEventListener(
-					'pointerdown',
-					onPointerDown,
-					true
-				);
-			} );
-		};
-		const removeIframe = ( iframe: HTMLIFrameElement ) => {
-			iframeCleanups.get( iframe )?.();
-			iframeCleanups.delete( iframe );
-		};
-
-		ownerDocument.querySelectorAll( 'iframe' ).forEach( addIframe );
-
-		const MutationObserverConstructor =
-			ownerDocument.defaultView?.MutationObserver;
-		const observer = MutationObserverConstructor
-			? new MutationObserverConstructor( ( records ) => {
-					records.forEach( ( record ) => {
-						record.removedNodes.forEach( ( node ) =>
-							forEachIframe( node, removeIframe )
-						);
-						record.addedNodes.forEach( ( node ) =>
-							forEachIframe( node, addIframe )
-						);
-					} );
-			  } )
-			: null;
-		observer?.observe( ownerDocument.documentElement, {
-			childList: true,
-			subtree: true,
-		} );
-
-		return () => {
-			observer?.disconnect();
-			iframeCleanups.forEach( ( cleanup ) => cleanup() );
-		};
-	}, [ enabled, onPointerDown, ownerDocument ] );
-}
diff --git a/packages/ui/src/menu/use-iframe-dismissal-bridge.ts b/packages/ui/src/menu/use-iframe-dismissal-bridge.ts
new file mode 100644
index 00000000000000..223a670b83d54d
--- /dev/null
+++ b/packages/ui/src/menu/use-iframe-dismissal-bridge.ts
@@ -0,0 +1,201 @@
+import type { Menu as _Menu } from '@base-ui/react/menu';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import type { RootProps } from './types';
+
+function getIframeDocument( iframe: HTMLIFrameElement ) {
+	try {
+		return iframe.contentDocument;
+	} catch {
+		return null;
+	}
+}
+
+function forEachIframe(
+	node: Node,
+	callback: ( iframe: HTMLIFrameElement ) => void
+) {
+	if ( node.nodeType !== Node.ELEMENT_NODE ) {
+		return;
+	}
+
+	const element = node as Element;
+	if ( element.tagName === 'IFRAME' ) {
+		callback( element as HTMLIFrameElement );
+	}
+	element.querySelectorAll( 'iframe' ).forEach( callback );
+}
+
+function isInsideCurrentMenu( event: Event, trigger: Element ) {
+	const target = event.target as Node | null;
+	const targetElement =
+		target?.nodeType === Node.ELEMENT_NODE
+			? ( target as Element )
+			: target?.parentElement;
+	const popupId = trigger.getAttribute( 'aria-controls' );
+
+	if ( ! targetElement || ! popupId ) {
+		return false;
+	}
+
+	const popup = targetElement.ownerDocument.getElementById( popupId );
+	if ( ! popup ) {
+		return false;
+	}
+
+	const rootOwnerId = popup.getAttribute( 'data-rootownerid' );
+	if ( ! rootOwnerId ) {
+		return popup.contains( targetElement );
+	}
+
+	return (
+		targetElement
+			.closest( '[data-rootownerid]' )
+			?.getAttribute( 'data-rootownerid' ) === rootOwnerId
+	);
+}
+
+function useCloseOnIframePointerDown( {
+	enabled,
+	onPointerDown,
+	ownerDocument,
+}: {
+	enabled: boolean;
+	onPointerDown: ( event: Event ) => void;
+	ownerDocument: Document | null;
+} ) {
+	useEffect( () => {
+		if ( ! enabled || ! ownerDocument ) {
+			return;
+		}
+
+		const iframeCleanups = new Map< HTMLIFrameElement, () => void >();
+		const addIframe = ( iframe: HTMLIFrameElement ) => {
+			if ( iframeCleanups.has( iframe ) ) {
+				return;
+			}
+
+			let iframeDocument: Document | null = null;
+			const updateIframeDocument = () => {
+				const nextIframeDocument = getIframeDocument( iframe );
+				if ( nextIframeDocument === iframeDocument ) {
+					return;
+				}
+
+				iframeDocument?.removeEventListener(
+					'pointerdown',
+					onPointerDown,
+					true
+				);
+				iframeDocument = nextIframeDocument;
+				iframeDocument?.addEventListener(
+					'pointerdown',
+					onPointerDown,
+					true
+				);
+			};
+
+			iframe.addEventListener( 'load', updateIframeDocument );
+			updateIframeDocument();
+			iframeCleanups.set( iframe, () => {
+				iframe.removeEventListener( 'load', updateIframeDocument );
+				iframeDocument?.removeEventListener(
+					'pointerdown',
+					onPointerDown,
+					true
+				);
+			} );
+		};
+		const removeIframe = ( iframe: HTMLIFrameElement ) => {
+			iframeCleanups.get( iframe )?.();
+			iframeCleanups.delete( iframe );
+		};
+
+		ownerDocument.querySelectorAll( 'iframe' ).forEach( addIframe );
+
+		const MutationObserverConstructor =
+			ownerDocument.defaultView?.MutationObserver;
+		const observer = MutationObserverConstructor
+			? new MutationObserverConstructor( ( records ) => {
+					records.forEach( ( record ) => {
+						record.removedNodes.forEach( ( node ) =>
+							forEachIframe( node, removeIframe )
+						);
+						record.addedNodes.forEach( ( node ) =>
+							forEachIframe( node, addIframe )
+						);
+					} );
+			  } )
+			: null;
+		observer?.observe( ownerDocument.documentElement, {
+			childList: true,
+			subtree: true,
+		} );
+
+		return () => {
+			observer?.disconnect();
+			iframeCleanups.forEach( ( cleanup ) => cleanup() );
+		};
+	}, [ enabled, onPointerDown, ownerDocument ] );
+}
+
+/*
+ * Temporary bridge for https://github.com/mui/base-ui/issues/5410#issuecomment-5376507925.
+ * Base UI 1.7.0 listens for outside presses only in the menu's owner document,
+ * but pointer events do not cross document boundaries. Once the minimum Base
+ * UI version fixes this, delete this hook's import, call, and prop spread from
+ * `Root`, then pass `handleOpenChange` directly to `_Menu.Root` again.
+ */
+export function useIframeDismissalBridge( {
+	actionsRef,
+	defaultOpen,
+	disabled,
+	modal,
+	onOpenChange,
+	open: openProp,
+}: Pick<
+	RootProps,
+	'actionsRef' | 'defaultOpen' | 'disabled' | 'modal' | 'open'
+> & {
+	onOpenChange: NonNullable< RootProps[ 'onOpenChange' ] >;
+} ) {
+	const fallbackActionsRef = useRef< _Menu.Root.Actions | null >( null );
+	const resolvedActionsRef = actionsRef ?? fallbackActionsRef;
+	const [ uncontrolledOpen, setUncontrolledOpen ] = useState(
+		defaultOpen ?? false
+	);
+	const [ trigger, setTrigger ] = useState< Element | null >( null );
+	const open = openProp ?? uncontrolledOpen;
+	const handleIframePointerDown = useCallback(
+		( event: Event ) => {
+			if ( trigger && ! isInsideCurrentMenu( event, trigger ) ) {
+				resolvedActionsRef.current?.close();
+			}
+		},
+		[ resolvedActionsRef, trigger ]
+	);
+
+	useCloseOnIframePointerDown( {
+		enabled: open && modal === false && ! disabled && trigger !== null,
+		onPointerDown: handleIframePointerDown,
+		ownerDocument: trigger?.ownerDocument ?? null,
+	} );
+
+	const handleOpenChange: NonNullable< RootProps[ 'onOpenChange' ] > = (
+		nextOpen,
+		eventDetails
+	) => {
+		onOpenChange( nextOpen, eventDetails );
+
+		if ( eventDetails.isCanceled ) {
+			return;
+		}
+
+		setUncontrolledOpen( nextOpen );
+		setTrigger( nextOpen ? eventDetails.trigger ?? null : null );
+	};
+
+	return {
+		actionsRef: resolvedActionsRef,
+		onOpenChange: handleOpenChange,
+	};
+}
diff --git a/test/storybook-playwright/specs/menu.spec.ts b/test/storybook-playwright/specs/menu.spec.ts
deleted file mode 100644
index 82261dc57cd8e3..00000000000000
--- a/test/storybook-playwright/specs/menu.spec.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { gotoStoryId } from '../utils';
-
-test.describe( 'Menu', () => {
-	test.beforeEach( async ( { page } ) => {
-		await gotoStoryId(
-			page,
-			'design-system-components-menu--non-modal-with-iframe'
-		);
-	} );
-
-	test( 'one iframe click closes a non-modal menu and activates the target', async ( {
-		page,
-	} ) => {
-		await page.getByRole( 'button', { name: 'Open menu' } ).click();
-		await expect( page.getByRole( 'menu' ) ).toBeVisible();
-
-		const canvasTarget = page
-			.frameLocator( 'iframe[title="Editor canvas two"]' )
-			.getByRole( 'button', { name: 'Canvas target two' } );
-		await canvasTarget.evaluate( ( target ) => {
-			target.addEventListener( 'click', () => {
-				target.setAttribute( 'data-activated', 'true' );
-			} );
-		} );
-
-		await canvasTarget.click();
-
-		await expect( canvasTarget ).toHaveAttribute(
-			'data-activated',
-			'true'
-		);
-		await expect( canvasTarget ).toBeFocused();
-		await expect( page.getByRole( 'menu' ) ).toBeHidden();
-	} );
-
-	test( 'one parent-document click closes a non-modal menu and activates the target', async ( {
-		page,
-	} ) => {
-		await page.getByRole( 'button', { name: 'Open menu' } ).click();
-		await expect( page.getByRole( 'menu' ) ).toBeVisible();
-
-		const parentTarget = page.getByRole( 'button', {
-			name: 'Parent target',
-		} );
-		await parentTarget.evaluate( ( target ) => {
-			target.addEventListener( 'click', () => {
-				target.setAttribute( 'data-activated', 'true' );
-			} );
-		} );
-
-		await parentTarget.click();
-
-		await expect( page.getByRole( 'menu' ) ).toBeHidden();
-		await expect( parentTarget ).toHaveAttribute(
-			'data-activated',
-			'true'
-		);
-		await expect( parentTarget ).toBeFocused();
-	} );
-
-	test( 'Escape and arrow-key navigation keep their expected behavior', async ( {
-		page,
-	} ) => {
-		const trigger = page.getByRole( 'button', { name: 'Open menu' } );
-		await trigger.focus();
-		await page.keyboard.press( 'Enter' );
-
-		const firstItem = page.getByRole( 'menuitem', {
-			name: 'First action',
-		} );
-		const secondItem = page.getByRole( 'menuitem', {
-			name: 'Second action',
-		} );
-		await expect( firstItem ).toBeFocused();
-
-		await page.keyboard.press( 'ArrowDown' );
-		await expect( secondItem ).toBeFocused();
-
-		await page.keyboard.press( 'Escape' );
-		await expect( page.getByRole( 'menu' ) ).toBeHidden();
-		await expect( trigger ).toBeFocused();
-	} );
-} );

From fa2d5ed11cb665b2026c203c6a4b70fcfe285f4c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 26 Aug 2026 14:36:34 +0200
Subject: [PATCH 4/4] Menu: Handle nested iframe dismissal

---
 packages/ui/src/menu/test/index.test.tsx      |  59 +++++++++
 .../src/menu/use-iframe-dismissal-bridge.ts   | 123 ++++++++++--------
 2 files changed, 125 insertions(+), 57 deletions(-)

diff --git a/packages/ui/src/menu/test/index.test.tsx b/packages/ui/src/menu/test/index.test.tsx
index 4a9a3fdfeb39d4..1d663333cfe295 100644
--- a/packages/ui/src/menu/test/index.test.tsx
+++ b/packages/ui/src/menu/test/index.test.tsx
@@ -250,6 +250,65 @@ describe( 'Menu', () => {
 		expect( onCanvasClick ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	it( 'closes a non-modal menu on a nested same-origin iframe pointer interaction', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<>
+				<Menu.Root modal={ false }>
+					<Menu.Trigger>Actions</Menu.Trigger>
+					<Menu.Popup>
+						<Menu.Item>
+							<Menu.ItemLabel>Duplicate</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+				<iframe title="Editor canvas" />
+			</>
+		);
+
+		const editorIframe =
+			screen.getByTitle< HTMLIFrameElement >( 'Editor canvas' );
+		const editorDocument = editorIframe.contentDocument;
+
+		if ( ! editorDocument ) {
+			throw new Error( 'Expected a same-origin iframe document.' );
+		}
+
+		await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );
+		expect( await screen.findByRole( 'menu' ) ).toBeVisible();
+
+		const nestedIframe = editorDocument.createElement( 'iframe' );
+		editorDocument.body.appendChild( nestedIframe );
+		const nestedDocument = nestedIframe.contentDocument;
+
+		if ( ! nestedDocument ) {
+			throw new Error( 'Expected a nested same-origin iframe document.' );
+		}
+
+		const nestedAddEventListener = jest.spyOn(
+			nestedDocument,
+			'addEventListener'
+		);
+		await waitFor( () => {
+			expect( nestedAddEventListener ).toHaveBeenCalledWith(
+				'pointerdown',
+				expect.any( Function ),
+				true
+			);
+		} );
+
+		act( () => {
+			nestedDocument.dispatchEvent(
+				new MouseEvent( 'pointerdown', { bubbles: true } )
+			);
+		} );
+
+		await waitFor( () => {
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
 	it( 'does not close for pointer interactions inside a menu portaled to an iframe', async () => {
 		const user = userEvent.setup();
 		const iframe = document.createElement( 'iframe' );
diff --git a/packages/ui/src/menu/use-iframe-dismissal-bridge.ts b/packages/ui/src/menu/use-iframe-dismissal-bridge.ts
index 223a670b83d54d..80f92634b66560 100644
--- a/packages/ui/src/menu/use-iframe-dismissal-bridge.ts
+++ b/packages/ui/src/menu/use-iframe-dismissal-bridge.ts
@@ -68,73 +68,82 @@ function useCloseOnIframePointerDown( {
 			return;
 		}
 
-		const iframeCleanups = new Map< HTMLIFrameElement, () => void >();
-		const addIframe = ( iframe: HTMLIFrameElement ) => {
-			if ( iframeCleanups.has( iframe ) ) {
-				return;
+		const observeDocument = (
+			document: Document,
+			listenForPointerDown: boolean
+		): ( () => void ) => {
+			if ( listenForPointerDown ) {
+				document.addEventListener( 'pointerdown', onPointerDown, true );
 			}
 
-			let iframeDocument: Document | null = null;
-			const updateIframeDocument = () => {
-				const nextIframeDocument = getIframeDocument( iframe );
-				if ( nextIframeDocument === iframeDocument ) {
+			const iframeCleanups = new Map< HTMLIFrameElement, () => void >();
+			const addIframe = ( iframe: HTMLIFrameElement ) => {
+				if ( iframeCleanups.has( iframe ) ) {
 					return;
 				}
 
-				iframeDocument?.removeEventListener(
-					'pointerdown',
-					onPointerDown,
-					true
-				);
-				iframeDocument = nextIframeDocument;
-				iframeDocument?.addEventListener(
-					'pointerdown',
-					onPointerDown,
-					true
-				);
+				let iframeDocument: Document | null = null;
+				let iframeDocumentCleanup: ( () => void ) | undefined;
+				const updateIframeDocument = () => {
+					const nextIframeDocument = getIframeDocument( iframe );
+					if ( nextIframeDocument === iframeDocument ) {
+						return;
+					}
+
+					iframeDocumentCleanup?.();
+					iframeDocument = nextIframeDocument;
+					iframeDocumentCleanup = iframeDocument
+						? observeDocument( iframeDocument, true )
+						: undefined;
+				};
+
+				iframe.addEventListener( 'load', updateIframeDocument );
+				updateIframeDocument();
+				iframeCleanups.set( iframe, () => {
+					iframe.removeEventListener( 'load', updateIframeDocument );
+					iframeDocumentCleanup?.();
+				} );
+			};
+			const removeIframe = ( iframe: HTMLIFrameElement ) => {
+				iframeCleanups.get( iframe )?.();
+				iframeCleanups.delete( iframe );
 			};
 
-			iframe.addEventListener( 'load', updateIframeDocument );
-			updateIframeDocument();
-			iframeCleanups.set( iframe, () => {
-				iframe.removeEventListener( 'load', updateIframeDocument );
-				iframeDocument?.removeEventListener(
-					'pointerdown',
-					onPointerDown,
-					true
-				);
+			document.querySelectorAll( 'iframe' ).forEach( addIframe );
+
+			const MutationObserverConstructor =
+				document.defaultView?.MutationObserver;
+			const observer = MutationObserverConstructor
+				? new MutationObserverConstructor( ( records ) => {
+						records.forEach( ( record ) => {
+							record.removedNodes.forEach( ( node ) =>
+								forEachIframe( node, removeIframe )
+							);
+							record.addedNodes.forEach( ( node ) =>
+								forEachIframe( node, addIframe )
+							);
+						} );
+				  } )
+				: null;
+			observer?.observe( document.documentElement, {
+				childList: true,
+				subtree: true,
 			} );
-		};
-		const removeIframe = ( iframe: HTMLIFrameElement ) => {
-			iframeCleanups.get( iframe )?.();
-			iframeCleanups.delete( iframe );
-		};
 
-		ownerDocument.querySelectorAll( 'iframe' ).forEach( addIframe );
-
-		const MutationObserverConstructor =
-			ownerDocument.defaultView?.MutationObserver;
-		const observer = MutationObserverConstructor
-			? new MutationObserverConstructor( ( records ) => {
-					records.forEach( ( record ) => {
-						record.removedNodes.forEach( ( node ) =>
-							forEachIframe( node, removeIframe )
-						);
-						record.addedNodes.forEach( ( node ) =>
-							forEachIframe( node, addIframe )
-						);
-					} );
-			  } )
-			: null;
-		observer?.observe( ownerDocument.documentElement, {
-			childList: true,
-			subtree: true,
-		} );
-
-		return () => {
-			observer?.disconnect();
-			iframeCleanups.forEach( ( cleanup ) => cleanup() );
+			return () => {
+				observer?.disconnect();
+				iframeCleanups.forEach( ( cleanup ) => cleanup() );
+				if ( listenForPointerDown ) {
+					document.removeEventListener(
+						'pointerdown',
+						onPointerDown,
+						true
+					);
+				}
+			};
 		};
+
+		return observeDocument( ownerDocument, false );
 	}, [ enabled, onPointerDown, ownerDocument ] );
 }