Add ref to the return value of useFocusOutside, use it to check if ac…

…tive element is in the wrapper

packages/components/src/modal/index.tsx

@@ -75,7 +75,8 @@ function UnforwardedModal(
 	const focusOnMountRef = useFocusOnMount( focusOnMount );
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( onRequestClose );
+	const { ref: focusOutsideRef, ...focusOutsideProps } =
+		useFocusOutside( onRequestClose );
 
 	const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
 
@@ -147,6 +148,7 @@ function UnforwardedModal(
 						constrainedTabbingRef,
 						focusReturnRef,
 						focusOnMountRef,
+						focusOutsideRef,
 					] ) }
 					role={ role }
 					aria-label={ contentLabel }

packages/compose/src/hooks/use-dialog/index.ts

@@ -54,15 +54,20 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusOnMountRef = useFocusOnMount( options.focusOnMount );
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( ( event ) => {
-		// This unstable prop  is here only to manage backward compatibility
-		// for the Popover component otherwise, the onClose should be enough.
-		if ( currentOptions.current?.__unstableOnClose ) {
-			currentOptions.current.__unstableOnClose( 'focus-outside', event );
-		} else if ( currentOptions.current?.onClose ) {
-			currentOptions.current.onClose();
+	const { ref: focusOutsideRef, ...focusOutsideProps } = useFocusOutside(
+		( event ) => {
+			// This unstable prop  is here only to manage backward compatibility
+			// for the Popover component otherwise, the onClose should be enough.
+			if ( currentOptions.current?.__unstableOnClose ) {
+				currentOptions.current.__unstableOnClose(
+					'focus-outside',
+					event
+				);
+			} else if ( currentOptions.current?.onClose ) {
+				currentOptions.current.onClose();
+			}
 		}
-	} );
+	);
 	const closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {
 		if ( ! node ) {
 			return;
@@ -87,6 +92,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 			options.focusOnMount !== false ? focusReturnRef : null,
 			options.focusOnMount !== false ? focusOnMountRef : null,
 			closeOnEscapeRef,
+			focusOutsideRef,
 		] ),
 		{
 			...focusOutsideProps,

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

@@ -9,6 +9,7 @@ import type {
 	FocusEvent,
 	MouseEvent,
 	TouchEvent,
+	MutableRefObject,
 } from 'react';
 
 /**
@@ -64,6 +65,7 @@ type UseFocusOutsideReturn = {
 	onTouchStart: TouchEventHandler;
 	onTouchEnd: TouchEventHandler;
 	onBlur: FocusEventHandler;
+	ref: MutableRefObject< HTMLElement | null >;
 };
 
 /**
@@ -79,6 +81,7 @@ type UseFocusOutsideReturn = {
 export default function useFocusOutside(
 	onFocusOutside: ( event: FocusEvent ) => void
 ): UseFocusOutsideReturn {
+	const wrapperRef = useRef< HTMLElement | null >( null );
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {
 		currentOnFocusOutside.current = onFocusOutside;
@@ -147,11 +150,18 @@ export default function useFocusOutside(
 		}
 
 		blurCheckTimeoutId.current = setTimeout( () => {
+			const documentLostFocus = ! document.hasFocus();
+			const wrapperEl = wrapperRef.current;
+			const activeElement =
+				wrapperEl?.ownerDocument.activeElement ?? null;
+			const activeElementIsInWrapper =
+				wrapperEl?.contains( activeElement );
+
 			// 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() ) {
+			if ( documentLostFocus || activeElementIsInWrapper ) {
 				event.preventDefault();
 				return;
 			}
@@ -169,5 +179,6 @@ export default function useFocusOutside(
 		onTouchStart: normalizeButtonFocus,
 		onTouchEnd: normalizeButtonFocus,
 		onBlur: queueBlurCheck,
+		ref: wrapperRef,
 	};
 }