Modal: Fix loss of focus when clicking outside

WordPress · Jul 14, 2023 · 91822b7 · 91822b7
1 parent 05e02e8
commit 91822b7
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
@@ -170,6 +170,15 @@ function UnforwardedModal(
 		[ hasScrolledContent ]
 	);
 
+	const onOverlayPress: React.PointerEventHandler< HTMLDivElement > = (
+		event
+	) => {
+		if ( event.target === event.currentTarget ) {
+			event.preventDefault();
+			onRequestClose( event );
+		}
+	};
+
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -179,6 +188,9 @@ function UnforwardedModal(
 				overlayClassName
 			) }
 			onKeyDown={ handleEscapeKeyDown }
+			onPointerDown={
+				shouldCloseOnClickOutside ? onOverlayPress : undefined
+			}
 		>
 			<StyleProvider document={ document }>
 				<div