Search: Clicking outside overlay 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/composer.json

@@ -72,7 +72,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-search/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-master": "0.7.x-dev"
+			"dev-master": "0.8.x-dev"
 		},
 		"version-constants": {
 			"JETPACK_SEARCH_PKG__VERSION": "search.php"

projects/packages/search/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jetpack-search",
-	"version": "0.7.0",
+	"version": "0.8.0-alpha",
 	"description": "Package for Jetpack Search products",
 	"main": "main.js",
 	"directories": {

projects/packages/search/search.php

@@ -7,7 +7,7 @@
 
 namespace Automattic\Jetpack\Search;
 
-define( 'JETPACK_SEARCH_PKG__VERSION', '0.7.0' );
+define( 'JETPACK_SEARCH_PKG__VERSION', '0.8.0-alpha' );
 define( 'JETPACK_SEARCH_PKG__DIR', __DIR__ . '/' );
 define( 'JETPACK_SEARCH_PKG__SLUG', 'search' );
 

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

@@ -10,25 +10,38 @@ import React, { useEffect } from 'react';
 import { OVERLAY_CLASS_NAME } from '../lib/constants';
 import './overlay.scss';
 
-const callOnEscapeKey = callback => event => {
-	// IE11 uses 'Esc'
-	if ( event.key === 'Escape' || event.key === 'Esc' ) {
-		event.preventDefault();
-		callback();
-	}
-};
-
 const Overlay = props => {
 	const { children, closeOverlay, colorTheme, hasOverlayWidgets, isVisible } = props;
 
-	const closeWithEscape = callOnEscapeKey( closeOverlay );
 	useEffect( () => {
+		const closeWithEscape = event => {
+			if ( event.key === 'Escape' ) {
+				event.preventDefault();
+				closeOverlay();
+			}
+		};
+
+		const closeWithOutsideClick = event => {
+			const resultsContainer = document.getElementsByClassName(
+				'jetpack-instant-search__search-results'
+			)[ 0 ];
+			if (
+				event.target?.isConnected && // Ensure that the click target is still connected to DOM.
+				resultsContainer &&
+				! resultsContainer.contains( event.target )
+			) {
+				closeOverlay();
+			}
+		};
+
 		window.addEventListener( 'keydown', closeWithEscape );
+		window.addEventListener( 'click', closeWithOutsideClick );
 		return () => {
-			// Cleanup after event
+			// Cleanup on component dismount
 			window.removeEventListener( 'keydown', closeWithEscape );
+			window.removeEventListener( 'click', closeWithOutsideClick );
 		};
-	}, [ closeWithEscape ] );
+	}, [ closeOverlay ] );
 
 	return (
 		<div

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

@@ -61,6 +61,7 @@ class SearchApp extends Component {
 		super( ...arguments );
 
 		this.state = {
+			// TODO: Migrate visibility state to Redux.
 			isVisible: !! this.props.initialIsVisible, // initialIsVisible can be undefined
 			overlayOptionsCustomizerOverride: {},
 		};

projects/packages/search/src/instant-search/store/effects.js

@@ -131,6 +131,7 @@ function updateSearchQueryString( action ) {
 
 	// Uses a debounced version of the setQuery, which ensures we're not spamming the user's browser history
 	// with partly typed queries.
+	// TODO: Flush debounce before changing SearchApp visibility.
 	debouncedSetQuery( queryObject );
 }
 

projects/plugins/jetpack/changelog/fix-close-search-overlay-on-outside-click

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies.

projects/plugins/jetpack/composer.json

@@ -37,7 +37,7 @@
 		"automattic/jetpack-plugins-installer": "0.1.x-dev",
 		"automattic/jetpack-redirect": "1.7.x-dev",
 		"automattic/jetpack-roles": "1.4.x-dev",
-		"automattic/jetpack-search": "0.7.x-dev",
+		"automattic/jetpack-search": "0.8.x-dev",
 		"automattic/jetpack-status": "1.10.x-dev",
 		"automattic/jetpack-sync": "1.29.x-dev",
 		"automattic/jetpack-terms-of-service": "1.9.x-dev",