From 4ce34ac685a7bcf53b74fc6d42ca853eec38e859 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sun, 30 Jul 2023 06:44:19 +0900
Subject: [PATCH 1/5] Popover: Fix iframe story and add test

---
 .../components/src/popover/stories/index.tsx  | 48 +----------
 .../components/src/popover/test/index.tsx     | 14 ++++
 .../components/src/popover/test/utils.tsx     | 83 +++++++++++++++++++
 3 files changed, 99 insertions(+), 46 deletions(-)
 create mode 100644 packages/components/src/popover/test/utils.tsx

diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.tsx
index dc916af180558..c5636941037c1 100644
--- a/packages/components/src/popover/stories/index.tsx
+++ b/packages/components/src/popover/stories/index.tsx
@@ -14,8 +14,8 @@ import { __unstableIframe as Iframe } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 import { Popover } from '..';
+import { PopoverInsideIframeRenderedInExternalSlot } from '../test/utils';
 import type { PopoverProps } from '../types';
 
 const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
@@ -249,51 +249,7 @@ DynamicHeight.args = {
 export const WithSlotOutsideIframe: ComponentStory< typeof Popover > = (
 	args
 ) => {
-	const anchorRef = useRef( null );
-	const slotName = 'popover-with-slot-outside-iframe';
-
-	return (
-		<SlotFillProvider>
-			<div>
-				{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-				<Popover.Slot name={ slotName } />
-				<Iframe
-					style={ {
-						width: '100%',
-						height: '400px',
-						border: '0',
-						outline: '1px solid purple',
-					} }
-				>
-					<div
-						style={ {
-							height: '200vh',
-							paddingTop: '10vh',
-						} }
-					>
-						<p
-							style={ {
-								padding: '8px',
-								background: 'salmon',
-								maxWidth: '200px',
-								marginTop: '100px',
-								marginLeft: 'auto',
-								marginRight: 'auto',
-							} }
-							ref={ anchorRef }
-						>
-							Popover&apos;s anchor
-						</p>
-						<Popover
-							{ ...args }
-							__unstableSlotName={ slotName }
-							anchorRef={ anchorRef }
-						/>
-					</div>
-				</Iframe>
-			</div>
-		</SlotFillProvider>
-	);
+	return <PopoverInsideIframeRenderedInExternalSlot { ...args } />;
 };
 WithSlotOutsideIframe.args = {
 	...Default.args,
diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx
index 7fb9e5377bf31..f98c4e27d3700 100644
--- a/packages/components/src/popover/test/index.tsx
+++ b/packages/components/src/popover/test/index.tsx
@@ -19,6 +19,7 @@ import {
 } from '../utils';
 import Popover from '..';
 import type { PopoverProps } from '../types';
+import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
 
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,
@@ -175,6 +176,19 @@ describe( 'Popover', () => {
 		} );
 	} );
 
+	describe( 'Slot outside iframe', () => {
+		it( 'should support cross-document rendering', async () => {
+			render(
+				<PopoverInsideIframeRenderedInExternalSlot>
+					<span>content</span>
+				</PopoverInsideIframeRenderedInExternalSlot>
+			);
+			await waitFor( async () =>
+				expect( screen.getByText( 'content' ) ).toBeVisible()
+			);
+		} );
+	} );
+
 	describe( 'positionToPlacement', () => {
 		it.each( ALL_POSITIONS_TO_EXPECTED_PLACEMENTS )(
 			'converts `%s` to `%s`',
diff --git a/packages/components/src/popover/test/utils.tsx b/packages/components/src/popover/test/utils.tsx
new file mode 100644
index 0000000000000..ab61475e3df63
--- /dev/null
+++ b/packages/components/src/popover/test/utils.tsx
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Popover from '..';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import type { WordPressComponentProps } from '../../ui/context';
+
+const GenericIframe = ( {
+	children,
+	...props
+}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
+	const [ isMounted, setIsMounted ] = useState( false );
+	const iframeRef = useRef< HTMLIFrameElement >( null );
+
+	useEffect( () => {
+		setIsMounted( true );
+	}, [] );
+
+	return (
+		<iframe { ...props } title="My Iframe" ref={ iframeRef }>
+			{ isMounted &&
+				iframeRef.current?.contentWindow &&
+				createPortal(
+					children,
+					iframeRef.current.contentWindow.document.body
+				) }
+		</iframe>
+	);
+};
+
+export const PopoverInsideIframeRenderedInExternalSlot = (
+	props: React.ComponentProps< typeof Popover >
+) => {
+	const SLOT_NAME = 'my-slot';
+	const [ anchorRef, setAnchorRef ] =
+		useState< HTMLParagraphElement | null >();
+
+	return (
+		<SlotFillProvider>
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name={ SLOT_NAME } />
+			<GenericIframe
+				style={ {
+					width: '100%',
+					height: '400px',
+					border: '0',
+					outline: '1px solid purple',
+				} }
+			>
+				<div
+					style={ {
+						height: '200vh',
+						paddingTop: '10vh',
+					} }
+				>
+					<p
+						style={ {
+							padding: '8px',
+							background: 'salmon',
+							maxWidth: '200px',
+							marginTop: '100px',
+							marginLeft: 'auto',
+							marginRight: 'auto',
+						} }
+						ref={ setAnchorRef }
+					>
+						Popover&apos;s anchor
+					</p>
+					<Popover
+						{ ...props }
+						__unstableSlotName={ SLOT_NAME }
+						anchor={ anchorRef }
+					/>
+				</div>
+			</GenericIframe>
+		</SlotFillProvider>
+	);
+};

From 9ab221344bdb05c6f0292b5f0e36da2103d4d13a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sun, 30 Jul 2023 06:47:46 +0900
Subject: [PATCH 2/5] Simplify state ref

---
 .../components/src/popover/test/utils.tsx     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/popover/test/utils.tsx b/packages/components/src/popover/test/utils.tsx
index ab61475e3df63..6cbc6c117e41f 100644
--- a/packages/components/src/popover/test/utils.tsx
+++ b/packages/components/src/popover/test/utils.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
+import { createPortal, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,20 +14,16 @@ const GenericIframe = ( {
 	children,
 	...props
 }: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
-	const [ isMounted, setIsMounted ] = useState( false );
-	const iframeRef = useRef< HTMLIFrameElement >( null );
-
-	useEffect( () => {
-		setIsMounted( true );
-	}, [] );
+	const [ iframeRef, setIframeRef ] = useState< HTMLIFrameElement | null >(
+		null
+	);
 
 	return (
-		<iframe { ...props } title="My Iframe" ref={ iframeRef }>
-			{ isMounted &&
-				iframeRef.current?.contentWindow &&
+		<iframe { ...props } title="My Iframe" ref={ setIframeRef }>
+			{ iframeRef?.contentWindow &&
 				createPortal(
 					children,
-					iframeRef.current.contentWindow.document.body
+					iframeRef?.contentWindow.document.body
 				) }
 		</iframe>
 	);
@@ -37,8 +33,9 @@ export const PopoverInsideIframeRenderedInExternalSlot = (
 	props: React.ComponentProps< typeof Popover >
 ) => {
 	const SLOT_NAME = 'my-slot';
-	const [ anchorRef, setAnchorRef ] =
-		useState< HTMLParagraphElement | null >();
+	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
+		null
+	);
 
 	return (
 		<SlotFillProvider>

From c0ef731293cb0560ea308cff430f0f6b4a27db08 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 2 Aug 2023 05:28:18 +0900
Subject: [PATCH 3/5] Move test utils file

---
 .../src/popover/test/{utils.tsx => utils/index.tsx}         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename packages/components/src/popover/test/{utils.tsx => utils/index.tsx} (90%)

diff --git a/packages/components/src/popover/test/utils.tsx b/packages/components/src/popover/test/utils/index.tsx
similarity index 90%
rename from packages/components/src/popover/test/utils.tsx
rename to packages/components/src/popover/test/utils/index.tsx
index 6cbc6c117e41f..fd57f1090ead5 100644
--- a/packages/components/src/popover/test/utils.tsx
+++ b/packages/components/src/popover/test/utils/index.tsx
@@ -6,9 +6,9 @@ import { createPortal, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Popover from '..';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import type { WordPressComponentProps } from '../../ui/context';
+import Popover from '../..';
+import { Provider as SlotFillProvider } from '../../../slot-fill';
+import type { WordPressComponentProps } from '../../../ui/context';
 
 const GenericIframe = ( {
 	children,

From 3ec5c25dcac56bca9dfd3c36b7319014903ae595 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 2 Aug 2023 08:55:15 +0900
Subject: [PATCH 4/5] Fix Firefox case

---
 .../src/popover/test/utils/index.tsx          | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/popover/test/utils/index.tsx b/packages/components/src/popover/test/utils/index.tsx
index fd57f1090ead5..344456c0775b3 100644
--- a/packages/components/src/popover/test/utils/index.tsx
+++ b/packages/components/src/popover/test/utils/index.tsx
@@ -14,17 +14,23 @@ const GenericIframe = ( {
 	children,
 	...props
 }: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
-	const [ iframeRef, setIframeRef ] = useState< HTMLIFrameElement | null >(
-		null
-	);
+	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
 
 	return (
-		<iframe { ...props } title="My Iframe" ref={ setIframeRef }>
-			{ iframeRef?.contentWindow &&
-				createPortal(
-					children,
-					iframeRef?.contentWindow.document.body
-				) }
+		<iframe
+			{ ...props }
+			title="My Iframe"
+			// Waiting for the load event ensures that this works in Firefox.
+			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
+			onLoad={ ( event ) => {
+				if ( event.currentTarget.contentDocument ) {
+					setContainerNode(
+						event.currentTarget.contentDocument.body
+					);
+				}
+			} }
+		>
+			{ containerNode && createPortal( children, containerNode ) }
 		</iframe>
 	);
 };

From 177fccde7e21e6505e1bda6167cfb43d3595fe47 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 5 Aug 2023 02:52:43 +0900
Subject: [PATCH 5/5] Fix iframe in Chrome

---
 packages/components/src/popover/test/utils/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/popover/test/utils/index.tsx b/packages/components/src/popover/test/utils/index.tsx
index 344456c0775b3..53af9af21b838 100644
--- a/packages/components/src/popover/test/utils/index.tsx
+++ b/packages/components/src/popover/test/utils/index.tsx
@@ -20,6 +20,7 @@ const GenericIframe = ( {
 		<iframe
 			{ ...props }
 			title="My Iframe"
+			srcDoc="<!doctype html><html><body></body></html>"
 			// Waiting for the load event ensures that this works in Firefox.
 			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
 			onLoad={ ( event ) => {