Search: Clicking outside now closes overlay

projects/packages/search/changelog/fix-close-search-overlay-on-outside-click

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Clicking outside overlay now closes overlay

projects/packages/search/src/instant-search/components/overlay.jsx

@@ -11,24 +11,38 @@ import { OVERLAY_CLASS_NAME } from '../lib/constants';
 import './overlay.scss';
 
 const callOnEscapeKey = callback => event => {
-	// IE11 uses 'Esc'
-	if ( event.key === 'Escape' || event.key === 'Esc' ) {
+	if ( event.key === 'Escape' ) {
 		event.preventDefault();
 		callback();
 	}
 };
 
+const callOnOutsideClick = callback => {
+	// TODO: Make this the actual overlay element in the future.
+	const overlayContainer = document.getElementsByClassName(
+		'jetpack-instant-search__search-results'
+	)[ 0 ];
+	return event => {
+		if ( overlayContainer && ! overlayContainer.contains( event.target ) ) {
+			callback();
+		}
+	};
+};
+
 const Overlay = props => {
 	const { children, closeOverlay, colorTheme, hasOverlayWidgets, isVisible } = props;
 
 	const closeWithEscape = callOnEscapeKey( closeOverlay );
+	const closeWithOutsideClick = callOnOutsideClick( closeOverlay );
 	useEffect( () => {
 		window.addEventListener( 'keydown', closeWithEscape );
+		window.addEventListener( 'click', closeWithOutsideClick );
 		return () => {
-			// Cleanup after event
+			// Cleanup on component dismount
 			window.removeEventListener( 'keydown', closeWithEscape );
+			window.addEventListener( 'click', closeWithOutsideClick );
 		};
-	}, [ closeWithEscape ] );
+	}, [ closeWithEscape, closeWithOutsideClick ] );
 
 	return (
 		<div