From 35ab7cc5283eca4e75a5487213c7ff1f28984b68 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 16 Jun 2023 11:33:03 -0700
Subject: [PATCH 01/16] Fix modal closing when a contained iframe is focused

Remove focus outside hook.
---
 packages/components/src/modal/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 2746c40fcaab02..718ea31a4a206d 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -20,7 +20,6 @@ import {
 	useInstanceId,
 	useFocusReturn,
 	useFocusOnMount,
-	__experimentalUseFocusOutside as useFocusOutside,
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
@@ -91,7 +90,6 @@ function UnforwardedModal(
 	);
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( onRequestClose );
 	const contentRef = useRef< HTMLDivElement >( null );
 	const childrenContainerRef = useRef< HTMLDivElement >( null );
 
@@ -253,9 +251,6 @@ function UnforwardedModal(
 					aria-labelledby={ contentLabel ? undefined : headingId }
 					aria-describedby={ aria.describedby }
 					tabIndex={ -1 }
-					{ ...( shouldCloseOnClickOutside
-						? focusOutsideProps
-						: {} ) }
 					onKeyDown={ onKeyDown }
 				>
 					<div

From 6502514921a60e6e30cd5ec3e7cfb14d94b1ff0a Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 25 Oct 2022 21:54:06 +0900
Subject: [PATCH 02/16] Test: add iframe to Modal component

---
 packages/components/src/modal/stories/index.story.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
index 60a53947116fac..7979d0c0cbddc1 100644
--- a/packages/components/src/modal/stories/index.story.tsx
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -76,6 +76,13 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 
 					<InputControl style={ { marginBottom: '20px' } } />
 
+					<iframe
+						title="Example"
+						width="300"
+						height="200"
+						src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
+					/>
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>

From 22d41713846572d1051122aa98d399aac66c2eb6 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 4 Sep 2023 22:30:39 -0700
Subject: [PATCH 03/16] Monopolize open modal

---
 packages/components/src/modal/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 718ea31a4a206d..273f59ab337605 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -35,8 +35,9 @@ import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
-// Used to count the number of open modals.
+// Used to track and dismiss the prior modal when another opens.
 let openModalCount = 0;
+let dismissOpenModal: ModalProps[ 'onRequestClose' ];
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -128,7 +129,10 @@ function UnforwardedModal(
 
 		if ( openModalCount === 1 ) {
 			document.body.classList.add( bodyOpenClassName );
+		} else if ( openModalCount > 1 ) {
+			dismissOpenModal();
 		}
+		dismissOpenModal = onRequestClose;
 
 		return () => {
 			openModalCount--;
@@ -137,7 +141,7 @@ function UnforwardedModal(
 				document.body.classList.remove( bodyOpenClassName );
 			}
 		};
-	}, [ bodyOpenClassName ] );
+	}, [ bodyOpenClassName, onRequestClose ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {

From 40ae7fe7156f4e94a4d041601eb2ebe9120aa5d0 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 4 Sep 2023 22:37:10 -0700
Subject: [PATCH 04/16] Revise comment

---
 packages/components/src/modal/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 273f59ab337605..d20bdb3dbab8d2 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -204,10 +204,7 @@ function UnforwardedModal(
 		onPointerDown: ( event ) => {
 			if ( event.isPrimary && event.target === event.currentTarget ) {
 				pressTarget = event.target;
-				// Avoids loss of focus yet also leaves `useFocusOutside`
-				// practically useless with its only potential trigger being
-				// programmatic focus movement. TODO opt for either removing
-				// the hook or enhancing it such that this isn't needed.
+				// Avoids focus changing so that focus return works as expected.
 				event.preventDefault();
 			}
 		},

From 8eae8b3d4fb50b175fe2f448a7100bb0c07d890a Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 4 Sep 2023 22:43:20 -0700
Subject: [PATCH 05/16] Remove needless condition

---
 packages/components/src/modal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index d20bdb3dbab8d2..0a71eff4eaf860 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -202,7 +202,7 @@ function UnforwardedModal(
 		onPointerUp: React.PointerEventHandler< HTMLDivElement >;
 	} = {
 		onPointerDown: ( event ) => {
-			if ( event.isPrimary && event.target === event.currentTarget ) {
+			if ( event.target === event.currentTarget ) {
 				pressTarget = event.target;
 				// Avoids focus changing so that focus return works as expected.
 				event.preventDefault();

From e76f873414f8abda0cd188dd58f08e6a2a221de8 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 12 Sep 2023 15:30:28 -0700
Subject: [PATCH 06/16] Avoid running effect due to unstable prop

---
 packages/components/src/modal/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 0a71eff4eaf860..5a03b786303cfa 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -119,6 +119,12 @@ function UnforwardedModal(
 		}
 	}, [ contentRef ] );
 
+	const refOnRequestClose =
+		useRef< ModalProps[ 'onRequestClose' ] >( onRequestClose );
+	useEffect( () => {
+		refOnRequestClose.current = onRequestClose;
+	}, [ onRequestClose ] );
+
 	useEffect( () => {
 		ariaHelper.modalize( ref.current );
 		return () => ariaHelper.unmodalize();
@@ -141,7 +147,7 @@ function UnforwardedModal(
 				document.body.classList.remove( bodyOpenClassName );
 			}
 		};
-	}, [ bodyOpenClassName, onRequestClose ] );
+	}, [ bodyOpenClassName ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {

From 517cdb1abea29d8dba8f47f972eacbd587371dea Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 12 Sep 2023 16:37:41 -0700
Subject: [PATCH 07/16] Permit nested Modals

---
 packages/components/src/modal/index.tsx | 31 +++++++++++++++++--------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 5a03b786303cfa..4e63344e6e331a 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -15,6 +15,8 @@ import {
 	useState,
 	forwardRef,
 	useLayoutEffect,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import {
 	useInstanceId,
@@ -35,9 +37,10 @@ import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
-// Used to track and dismiss the prior modal when another opens.
+// Used to track and dismiss the prior modal when another opens unless nested.
 let openModalCount = 0;
-let dismissOpenModal: ModalProps[ 'onRequestClose' ];
+let dismissOpenModal: ModalProps[ 'onRequestClose' ] | undefined;
+const context = createContext( false );
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -119,12 +122,12 @@ function UnforwardedModal(
 		}
 	}, [ contentRef ] );
 
-	const refOnRequestClose =
-		useRef< ModalProps[ 'onRequestClose' ] >( onRequestClose );
+	const refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();
 	useEffect( () => {
 		refOnRequestClose.current = onRequestClose;
 	}, [ onRequestClose ] );
 
+	const isNested = useContext( context );
 	useEffect( () => {
 		ariaHelper.modalize( ref.current );
 		return () => ariaHelper.unmodalize();
@@ -135,10 +138,10 @@ function UnforwardedModal(
 
 		if ( openModalCount === 1 ) {
 			document.body.classList.add( bodyOpenClassName );
-		} else if ( openModalCount > 1 ) {
-			dismissOpenModal();
+		} else if ( openModalCount > 1 && ! isNested ) {
+			dismissOpenModal?.();
 		}
-		dismissOpenModal = onRequestClose;
+		if ( ! isNested ) dismissOpenModal = refOnRequestClose.current;
 
 		return () => {
 			openModalCount--;
@@ -147,7 +150,7 @@ function UnforwardedModal(
 				document.body.classList.remove( bodyOpenClassName );
 			}
 		};
-	}, [ bodyOpenClassName ] );
+	}, [ bodyOpenClassName, isNested ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
@@ -227,7 +230,7 @@ function UnforwardedModal(
 		},
 	};
 
-	return createPortal(
+	const modal = (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
@@ -322,7 +325,15 @@ function UnforwardedModal(
 					</div>
 				</div>
 			</StyleProvider>
-		</div>,
+		</div>
+	);
+
+	return createPortal(
+		isNested ? (
+			modal
+		) : (
+			<context.Provider value={ true }>{ modal }</context.Provider>
+		),
 		document.body
 	);
 }

From 1bf1f02c711be9197910fc77b097afd3238888cb Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 14 Sep 2023 16:46:31 -0700
Subject: [PATCH 08/16] Robustly support nested Modals

---
 packages/components/src/modal/index.tsx | 38 ++++++++++++++-----------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 4e63344e6e331a..cb209298f70d9f 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -2,7 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ForwardedRef, KeyboardEvent, UIEvent } from 'react';
+import type {
+	ForwardedRef,
+	KeyboardEvent,
+	MutableRefObject,
+	UIEvent,
+} from 'react';
 
 /**
  * WordPress dependencies
@@ -38,9 +43,9 @@ import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
-let openModalCount = 0;
-let dismissOpenModal: ModalProps[ 'onRequestClose' ] | undefined;
-const context = createContext( false );
+const context = createContext<
+	MutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]
+>( [] );
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -127,30 +132,29 @@ function UnforwardedModal(
 		refOnRequestClose.current = onRequestClose;
 	}, [ onRequestClose ] );
 
-	const isNested = useContext( context );
 	useEffect( () => {
 		ariaHelper.modalize( ref.current );
 		return () => ariaHelper.unmodalize();
 	}, [] );
 
+	const dismissers = useContext( context );
 	useEffect( () => {
-		openModalCount++;
+		const openModalCount = dismissers.push( refOnRequestClose );
 
 		if ( openModalCount === 1 ) {
 			document.body.classList.add( bodyOpenClassName );
-		} else if ( openModalCount > 1 && ! isNested ) {
-			dismissOpenModal?.();
+		} else if ( openModalCount > 1 ) {
+			dismissers[ 0 ].current?.();
 		}
-		if ( ! isNested ) dismissOpenModal = refOnRequestClose.current;
 
 		return () => {
-			openModalCount--;
+			dismissers.shift();
 
-			if ( openModalCount === 0 ) {
+			if ( dismissers.length === 0 ) {
 				document.body.classList.remove( bodyOpenClassName );
 			}
 		};
-	}, [ bodyOpenClassName, isNested ] );
+	}, [ bodyOpenClassName, dismissers ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
@@ -328,12 +332,12 @@ function UnforwardedModal(
 		</div>
 	);
 
+	const nextLevelDismissers = useRef( [] );
+
 	return createPortal(
-		isNested ? (
-			modal
-		) : (
-			<context.Provider value={ true }>{ modal }</context.Provider>
-		),
+		<context.Provider value={ nextLevelDismissers.current }>
+			{ modal }
+		</context.Provider>,
 		document.body
 	);
 }

From f4344d38fa1907129b511d3b88d7a9c09010ca3f Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 20 Sep 2023 19:59:26 -0700
Subject: [PATCH 09/16] Preserve current behavior for nested modals

---
 packages/components/src/modal/index.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index cb209298f70d9f..a149caf6b212c1 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -43,9 +43,10 @@ import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
-const context = createContext<
-	MutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]
->( [] );
+const level0Dismissers: MutableRefObject<
+	ModalProps[ 'onRequestClose' ] | undefined
+>[] = [];
+const context = createContext( level0Dismissers );
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -138,23 +139,24 @@ function UnforwardedModal(
 	}, [] );
 
 	const dismissers = useContext( context );
+	const isLevel0 = dismissers === level0Dismissers;
 	useEffect( () => {
 		const openModalCount = dismissers.push( refOnRequestClose );
 
-		if ( openModalCount === 1 ) {
+		if ( openModalCount === 1 && isLevel0 ) {
 			document.body.classList.add( bodyOpenClassName );
-		} else if ( openModalCount > 1 ) {
-			dismissers[ 0 ].current?.();
 		}
 
+		if ( openModalCount > 1 ) dismissers[ 0 ].current?.();
+
 		return () => {
 			dismissers.shift();
 
-			if ( dismissers.length === 0 ) {
+			if ( dismissers.length === 0 && isLevel0 ) {
 				document.body.classList.remove( bodyOpenClassName );
 			}
 		};
-	}, [ bodyOpenClassName, dismissers ] );
+	}, [ dismissers, isLevel0 ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {

From 795d2c573b99b40750f55e08bce33cd69557cee2 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 21 Sep 2023 19:11:54 -0700
Subject: [PATCH 10/16] Split effect to separate concerns

---
 packages/components/src/modal/index.tsx | 38 ++++++++++++++++---------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index a149caf6b212c1..b46b889a145a88 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -48,6 +48,8 @@ const level0Dismissers: MutableRefObject<
 >[] = [];
 const context = createContext( level0Dismissers );
 
+let isBodyOpenClassActive = false;
+
 function UnforwardedModal(
 	props: ModalProps,
 	forwardedRef: ForwardedRef< HTMLDivElement >
@@ -128,35 +130,43 @@ function UnforwardedModal(
 		}
 	}, [ contentRef ] );
 
-	const refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();
-	useEffect( () => {
-		refOnRequestClose.current = onRequestClose;
-	}, [ onRequestClose ] );
-
+	// Accessibly isolates/unisolates the modal.
 	useEffect( () => {
 		ariaHelper.modalize( ref.current );
 		return () => ariaHelper.unmodalize();
 	}, [] );
 
+	// Keeps a fresh ref for the subsequent effect.
+	const refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();
+	useEffect( () => {
+		refOnRequestClose.current = onRequestClose;
+	}, [ onRequestClose ] );
+
 	const dismissers = useContext( context );
 	const isLevel0 = dismissers === level0Dismissers;
+
+	// Updates the stack tracking open modals at this level and calls
+	// onRequestClose for the prior modal if applicable.
 	useEffect( () => {
-		const openModalCount = dismissers.push( refOnRequestClose );
+		dismissers.push( refOnRequestClose );
+		const [ first, second ] = dismissers;
+		if ( second ) first?.current?.();
+		return () => void dismissers.shift();
+	}, [ dismissers ] );
 
-		if ( openModalCount === 1 && isLevel0 ) {
+	// Adds/removes the value of bodyOpenClassName to body element.
+	useEffect( () => {
+		if ( ! isBodyOpenClassActive ) {
+			isBodyOpenClassActive = true;
 			document.body.classList.add( bodyOpenClassName );
 		}
-
-		if ( openModalCount > 1 ) dismissers[ 0 ].current?.();
-
 		return () => {
-			dismissers.shift();
-
-			if ( dismissers.length === 0 && isLevel0 ) {
+			if ( isLevel0 && dismissers.length === 0 ) {
 				document.body.classList.remove( bodyOpenClassName );
+				isBodyOpenClassActive = false;
 			}
 		};
-	}, [ dismissers, isLevel0 ] );
+	}, [ bodyOpenClassName, dismissers, isLevel0 ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {

From 49f95b330d27b470295bb9c63cf8ca37cf2536f6 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 28 Sep 2023 19:56:57 -0700
Subject: [PATCH 11/16] Add unit test for request closing of nested modals

---
 packages/components/src/modal/test/index.tsx | 29 ++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
index 69f28508c14059..9073735e94dbe9 100644
--- a/packages/components/src/modal/test/index.tsx
+++ b/packages/components/src/modal/test/index.tsx
@@ -167,6 +167,35 @@ describe( 'Modal', () => {
 		expect( onRequestClose ).not.toHaveBeenCalled();
 	} );
 
+	it( 'should request closing of nested modal when outer modal unmounts', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const RequestCloseOfNested = () => {
+			const [ isShown, setIsShown ] = useState( true );
+			return (
+				<>
+					{ isShown && (
+						<Modal
+							onKeyDown={ ( { key } ) => {
+								if ( key === 'o' ) setIsShown( false );
+							} }
+							onRequestClose={ noop }
+						>
+							<Modal onRequestClose={ onRequestClose }>
+								<p>Nested modal content</p>
+							</Modal>
+						</Modal>
+					) }
+				</>
+			);
+		};
+		render( <RequestCloseOfNested /> );
+
+		await user.keyboard( 'o' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
 	it( 'should accessibly hide and show siblings including outer modals', async () => {
 		const user = userEvent.setup();
 

From 183b9a3659671e540e589e96e72c18e678cdaaab Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 21 Sep 2023 23:08:15 -0700
Subject: [PATCH 12/16] Call onRequestClose for nested modal when outer modal
 unmounts

---
 packages/components/src/modal/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index b46b889a145a88..4b99136c64b56b 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -144,14 +144,20 @@ function UnforwardedModal(
 
 	const dismissers = useContext( context );
 	const isLevel0 = dismissers === level0Dismissers;
+	const nestedDismissers = useRef< typeof level0Dismissers >( [] );
 
 	// Updates the stack tracking open modals at this level and calls
-	// onRequestClose for the prior modal if applicable.
+	// onRequestClose for any prior and/or nested modals as applicable.
 	useEffect( () => {
 		dismissers.push( refOnRequestClose );
 		const [ first, second ] = dismissers;
 		if ( second ) first?.current?.();
-		return () => void dismissers.shift();
+
+		const nested = nestedDismissers.current;
+		return () => {
+			nested[ 0 ]?.current?.();
+			dismissers.shift();
+		};
 	}, [ dismissers ] );
 
 	// Adds/removes the value of bodyOpenClassName to body element.
@@ -344,10 +350,8 @@ function UnforwardedModal(
 		</div>
 	);
 
-	const nextLevelDismissers = useRef( [] );
-
 	return createPortal(
-		<context.Provider value={ nextLevelDismissers.current }>
+		<context.Provider value={ nestedDismissers.current }>
 			{ modal }
 		</context.Provider>,
 		document.body

From 145dc0e3106e55d31c72fb01cecc9cf768c65193 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 5 Oct 2023 09:47:23 -0700
Subject: [PATCH 13/16] Comment and rename per feedback

---
 packages/components/src/modal/index.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 4b99136c64b56b..041c592166ab73 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -46,7 +46,7 @@ import type { ModalProps } from './types';
 const level0Dismissers: MutableRefObject<
 	ModalProps[ 'onRequestClose' ] | undefined
 >[] = [];
-const context = createContext( level0Dismissers );
+const ModalContext = createContext( level0Dismissers );
 
 let isBodyOpenClassActive = false;
 
@@ -142,8 +142,10 @@ function UnforwardedModal(
 		refOnRequestClose.current = onRequestClose;
 	}, [ onRequestClose ] );
 
-	const dismissers = useContext( context );
-	const isLevel0 = dismissers === level0Dismissers;
+	// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
+	// one should remain open at a time and the list enables closing prior ones.
+	const dismissers = useContext( ModalContext );
+	// Used for the tracking and dismissing any nested modals.
 	const nestedDismissers = useRef< typeof level0Dismissers >( [] );
 
 	// Updates the stack tracking open modals at this level and calls
@@ -160,6 +162,7 @@ function UnforwardedModal(
 		};
 	}, [ dismissers ] );
 
+	const isLevel0 = dismissers === level0Dismissers;
 	// Adds/removes the value of bodyOpenClassName to body element.
 	useEffect( () => {
 		if ( ! isBodyOpenClassActive ) {
@@ -351,9 +354,9 @@ function UnforwardedModal(
 	);
 
 	return createPortal(
-		<context.Provider value={ nestedDismissers.current }>
+		<ModalContext.Provider value={ nestedDismissers.current }>
 			{ modal }
-		</context.Provider>,
+		</ModalContext.Provider>,
 		document.body
 	);
 }

From 04a1194e988d21eb6c262fdc816afeafa5d5df52 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 5 Oct 2023 09:53:25 -0700
Subject: [PATCH 14/16] Add changelog entry

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 779c1b42382904..84e6c67a0b6156 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -23,6 +23,7 @@
 -   `Button`: Remove `aria-selected` CSS selector from styling 'active' buttons ([#54931](https://github.com/WordPress/gutenberg/pull/54931)).
 -   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
 -   `Button`: Remove hover styles when `aria-disabled` is set to `true` for the secondary variant. ([#54978](https://github.com/WordPress/gutenberg/pull/54978))
+-   `Modal`: fix closing when contained iframe is focused ([#51602](https://github.com/WordPress/gutenberg/pull/51602)).
 
 ### Internal
 

From 3c18cfe9e31c4037d8a6dbc642e1b0ca943be80b Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 5 Oct 2023 09:54:47 -0700
Subject: [PATCH 15/16] Revert "Test: add iframe to Modal component"

This reverts commit 6502514921a60e6e30cd5ec3e7cfb14d94b1ff0a.
---
 packages/components/src/modal/stories/index.story.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
index 7979d0c0cbddc1..60a53947116fac 100644
--- a/packages/components/src/modal/stories/index.story.tsx
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -76,13 +76,6 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 
 					<InputControl style={ { marginBottom: '20px' } } />
 
-					<iframe
-						title="Example"
-						width="300"
-						height="200"
-						src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
-					/>
-
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>

From c7824d6d7b2a412609ffdd8cddcaf7a5a99a3cca Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 5 Oct 2023 10:13:50 -0700
Subject: [PATCH 16/16] Fix changelog

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 84e6c67a0b6156..e5f86ff78bc299 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `Modal`: fix closing when contained iframe is focused ([#51602](https://github.com/WordPress/gutenberg/pull/51602)).
+
 ## 25.9.0 (2023-10-05)
 
 ### Enhancements
@@ -23,7 +27,6 @@
 -   `Button`: Remove `aria-selected` CSS selector from styling 'active' buttons ([#54931](https://github.com/WordPress/gutenberg/pull/54931)).
 -   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
 -   `Button`: Remove hover styles when `aria-disabled` is set to `true` for the secondary variant. ([#54978](https://github.com/WordPress/gutenberg/pull/54978))
--   `Modal`: fix closing when contained iframe is focused ([#51602](https://github.com/WordPress/gutenberg/pull/51602)).
 
 ### Internal