From 2068546ee356450c2cb5f8c1be99d5524a42bb12 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] Fix modal closing when a contained iframe is focused

Uses the overlay element to request close instead of focus outside
hook.
---
 packages/components/src/modal/index.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index d9c7b602b8392..847c754137b4b 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,
+	PointerEventHandler,
+	UIEvent,
+} from 'react';
 
 /**
  * WordPress dependencies
@@ -20,7 +25,6 @@ import {
 	useInstanceId,
 	useFocusReturn,
 	useFocusOnMount,
-	__experimentalUseFocusOutside as useFocusOutside,
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
@@ -77,7 +81,6 @@ function UnforwardedModal(
 	const focusOnMountRef = useFocusOnMount( focusOnMount );
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( onRequestClose );
 	const contentRef = useRef< HTMLDivElement >( null );
 	const childrenContainerRef = useRef< HTMLDivElement >( null );
 
@@ -170,6 +173,10 @@ function UnforwardedModal(
 		[ hasScrolledContent ]
 	);
 
+	const onOverlayPress: PointerEventHandler< HTMLDivElement > = ( event ) => {
+		if ( event.target === event.currentTarget ) onRequestClose( event );
+	};
+
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -179,6 +186,9 @@ function UnforwardedModal(
 				overlayClassName
 			) }
 			onKeyDown={ handleEscapeKeyDown }
+			onPointerDown={
+				shouldCloseOnClickOutside ? onOverlayPress : undefined
+			}
 		>
 			<StyleProvider document={ document }>
 				<div
@@ -200,9 +210,6 @@ function UnforwardedModal(
 					aria-labelledby={ contentLabel ? undefined : headingId }
 					aria-describedby={ aria.describedby }
 					tabIndex={ -1 }
-					{ ...( shouldCloseOnClickOutside
-						? focusOutsideProps
-						: {} ) }
 					onKeyDown={ onKeyDown }
 				>
 					<div