Try/use focus outside iframe

packages/components/src/modal/stories/index.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { createPortal } from 'react-dom';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 
 /**
@@ -42,6 +43,29 @@ const meta: ComponentMeta< typeof Modal > = {
 };
 export default meta;
 
+const IFrame: React.FC< {
+	title?: string;
+	width: number;
+	height: number;
+	children: React.ReactNode;
+} > = ( { children, ...props } ) => {
+	const [ contentRef, setContentRef ] = useState< HTMLIFrameElement | null >(
+		null
+	);
+	const mountNode = contentRef?.contentWindow?.document?.body;
+
+	return (
+		<iframe
+			title="test-iframe"
+			{ ...props }
+			ref={ setContentRef }
+			tabIndex={ -1 }
+		>
+			{ mountNode && createPortal( children, mountNode ) }
+		</iframe>
+	);
+};
+
 const Template: ComponentStory< typeof Modal > = ( {
 	onRequestClose,
 	...args
@@ -78,6 +102,19 @@ const Template: ComponentStory< typeof Modal > = ( {
 
 					<InputControl style={ { marginBottom: '20px' } } />
 
+					<button>Button outside iframe</button>
+
+					<iframe
+						title="Example 1"
+						width="300"
+						height="200"
+						src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
+					/>
+
+					<IFrame title="Example 2" width={ 300 } height={ 200 }>
+						<button>Button inside iframe</button>
+					</IFrame>
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>

packages/compose/src/hooks/use-focus-outside/index.ts

@@ -1,20 +1,7 @@
-/**
- * External dependencies
- */
-import type {
-	FocusEventHandler,
-	EventHandler,
-	MouseEventHandler,
-	TouchEventHandler,
-	FocusEvent,
-	MouseEvent,
-	TouchEvent,
-} from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Input types which are classified as button types, for use in considering
@@ -63,14 +50,18 @@ function isFocusNormalizedButton(
 }
 
 type UseFocusOutsideReturn = {
-	onFocus: FocusEventHandler;
-	onMouseDown: MouseEventHandler;
-	onMouseUp: MouseEventHandler;
-	onTouchStart: TouchEventHandler;
-	onTouchEnd: TouchEventHandler;
-	onBlur: FocusEventHandler;
+	onFocus: React.FocusEventHandler;
+	onMouseDown: React.MouseEventHandler;
+	onMouseUp: React.MouseEventHandler;
+	onTouchStart: React.TouchEventHandler;
+	onTouchEnd: React.TouchEventHandler;
+	onBlur: React.FocusEventHandler;
 };
 
+function isIframe( element?: Element | null ): element is HTMLIFrameElement {
+	return element?.tagName === 'IFRAME';
+}
+
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
@@ -82,7 +73,7 @@ type UseFocusOutsideReturn = {
  * wrapping element element to capture when focus moves outside that element.
  */
 export default function useFocusOutside(
-	onFocusOutside: ( event: FocusEvent ) => void
+	onFocusOutside: ( event: React.FocusEvent ) => void
 ): UseFocusOutsideReturn {
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {
@@ -93,6 +84,55 @@ export default function useFocusOutside(
 
 	const blurCheckTimeoutId = useRef< number | undefined >();
 
+	const [ pollingData, setPollingData ] = useState< {
+		event: React.FocusEvent< Element >;
+		wrapperEl: Element;
+	} | null >( null );
+	const pollingIntervalId = useRef< number | undefined >();
+
+	// Thoughts:
+	// - it needs to always stop when component unmounted
+	// - it needs to work when resuming focus from another doc and clicking
+	//   immediately on the backdrop
+
+	// Sometimes the blur event is not reliable, for example when focus moves
+	// to an iframe inside the wrapper. In these scenarios, we resort to polling,
+	// and we explicitly check if focus has indeed moved outside the wrapper.
+	useEffect( () => {
+		if ( pollingData ) {
+			const { wrapperEl, event } = pollingData;
+
+			pollingIntervalId.current = window.setInterval( () => {
+				const focusedElement = wrapperEl.ownerDocument.activeElement;
+
+				if (
+					! wrapperEl.contains( focusedElement ) &&
+					wrapperEl.ownerDocument.hasFocus()
+				) {
+					// If focus is not inside the wrapper (but the document is in focus),
+					// we can fire the `onFocusOutside` callback and stop polling.
+					currentOnFocusOutside.current( event );
+					setPollingData( null );
+				} else if ( ! isIframe( focusedElement ) ) {
+					// If focus is still inside the wrapper, but an iframe is not the
+					// element currently focused, we can stop polling, because the regular
+					// blur events will fire as expected.
+					setPollingData( null );
+				}
+			}, 50 );
+		} else if ( pollingIntervalId.current ) {
+			window.clearInterval( pollingIntervalId.current );
+			pollingIntervalId.current = undefined;
+		}
+
+		return () => {
+			if ( pollingIntervalId.current ) {
+				window.clearInterval( pollingIntervalId.current );
+				pollingIntervalId.current = undefined;
+			}
+		};
+	}, [ pollingData ] );
+
 	/**
 	 * Cancel a blur check timeout.
 	 */
@@ -103,7 +143,7 @@ export default function useFocusOutside(
 	// Cancel blur checks on unmount.
 	useEffect( () => {
 		return () => cancelBlurCheck();
-	}, [] );
+	}, [ cancelBlurCheck ] );
 
 	// Cancel a blur check if the callback or ref is no longer provided.
 	useEffect( () => {
@@ -122,17 +162,18 @@ export default function useFocusOutside(
 	 * @param event
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 	 */
-	const normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =
-		useCallback( ( event ) => {
-			const { type, target } = event;
-			const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-			if ( isInteractionEnd ) {
-				preventBlurCheck.current = false;
-			} else if ( isFocusNormalizedButton( target ) ) {
-				preventBlurCheck.current = true;
-			}
-		}, [] );
+	const normalizeButtonFocus: React.EventHandler<
+		React.MouseEvent | React.TouchEvent
+	> = useCallback( ( event ) => {
+		const { type, target } = event;
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
+
+		if ( isInteractionEnd ) {
+			preventBlurCheck.current = false;
+		} else if ( isFocusNormalizedButton( target ) ) {
+			preventBlurCheck.current = true;
+		}
+	}, [] );
 
 	/**
 	 * A callback triggered when a blur event occurs on the element the handler
@@ -141,11 +182,15 @@ export default function useFocusOutside(
 	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
 	 * move outside the bound element and is still within the document.
 	 */
-	const queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {
+	const queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {
 		// React does not allow using an event reference asynchronously
 		// due to recycling behavior, except when explicitly persisted.
 		event.persist();
 
+		// Grab currentTarget immediately,
+		// otherwise it will change as the event bubbles up.
+		const wrapperEl = event.currentTarget;
+
 		// Skip blur check if clicking button. See `normalizeButtonFocus`.
 		if ( preventBlurCheck.current ) {
 			return;
@@ -169,19 +214,36 @@ export default function useFocusOutside(
 		}
 
 		blurCheckTimeoutId.current = setTimeout( () => {
-			// If document is not focused then focus should remain
-			// inside the wrapped component and therefore we cancel
-			// this blur event thereby leaving focus in place.
-			// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
-			if ( ! document.hasFocus() ) {
+			const activeElement = wrapperEl.ownerDocument.activeElement;
+
+			// On blur events, the onFocusOutside prop should not be called:
+			// 1. If document is not focused
+			//    https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
+			// 2. If the focus was moved to an element inside the wrapper component
+			//    (this would be the case, for example, of an iframe)
+			if (
+				! wrapperEl.ownerDocument.hasFocus() ||
+				( activeElement && wrapperEl.contains( activeElement ) )
+			) {
 				event.preventDefault();
+
+				// If focus is moved to an iframe inside the wrapper, start manually
+				// polling to check for correct focus outside events. See the useEffect
+				// above for more information.
+				if ( isIframe( activeElement ) ) {
+					setPollingData( { wrapperEl, event } );
+				}
+
 				return;
 			}
 
 			if ( 'function' === typeof currentOnFocusOutside.current ) {
 				currentOnFocusOutside.current( event );
 			}
-		}, 0 );
+			// the timeout delay is necessary to wait for browser's focus event to
+			// fire after the blur event, and therefore for this callback to be able
+			// to retrieve the correct document.activeElement.
+		}, 50 );
 	}, [] );
 
 	return {