Components: Use withFocusOutside utility for Autocomplete dismiss

As implemented, Popover portaled content will still fire focus onto root Autocomplete node, so blur trigger will cancel.

See: https://reactjs.org/docs/portals.html#event-bubbling-through-portals

components/autocomplete/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escapeRegExp, find, filter, map } from 'lodash';
+import { escapeRegExp, find, filter, map, flowRight } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,11 +14,12 @@ import { keycodes } from '@wordpress/utils';
  * Internal dependencies
  */
 import './style.scss';
+import withFocusOutside from '../higher-order/with-focus-outside';
 import Button from '../button';
 import Popover from '../popover';
 import withInstanceId from '../higher-order/with-instance-id';
 
-const { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, TAB } = keycodes;
+const { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT } = keycodes;
 
 /**
  * Recursively select the firstChild until hitting a leaf node.
@@ -136,6 +137,10 @@ export class Autocomplete extends Component {
 		this.setState( this.constructor.getInitialState() );
 	}
 
+	handleFocusOutside() {
+		this.reset();
+	}
+
 	// this method is separate so it can be overrided in tests
 	getCursor( container ) {
 		const selection = window.getSelection();
@@ -333,7 +338,6 @@ export class Autocomplete extends Component {
 
 			case LEFT:
 			case RIGHT:
-			case TAB:
 				this.reset();
 				return;
 
@@ -407,7 +411,6 @@ export class Autocomplete extends Component {
 				<Popover
 					isOpen={ isExpanded }
 					focusOnOpen={ false }
-					onClose={ this.reset }
 					position="top right"
 					className={ classes }
 					getAnchorRect={ this.getWordRect }
@@ -439,4 +442,7 @@ export class Autocomplete extends Component {
 	}
 }
 
-export default withInstanceId( Autocomplete );
+export default flowRight( [
+	withInstanceId,
+	withFocusOutside,
+] )( Autocomplete );

components/autocomplete/test/index.js

@@ -12,10 +12,12 @@ import { keycodes } from '@wordpress/utils';
 /**
  * Internal dependencies
  */
-import { Autocomplete } from '../';
+import EnhancedAutocomplete, { Autocomplete } from '../';
 
 const { ENTER, ESCAPE, UP, DOWN, SPACE } = keycodes;
 
+jest.useFakeTimers();
+
 class FakeEditor extends Component {
 	// we want to change the editor contents manually so don't let react update it
 	shouldComponentUpdate() {
@@ -35,9 +37,9 @@ class FakeEditor extends Component {
 	}
 }
 
-function makeAutocompleter( completers ) {
+function makeAutocompleter( completers, AutocompleteComponent = Autocomplete ) {
 	return mount(
-		<Autocomplete instanceId="1" completers={ completers }>{
+		<AutocompleteComponent instanceId="1" completers={ completers }>{
 			( { isExpanded, listBoxId, activeId } ) => (
 				<FakeEditor
 					aria-autocomplete="list"
@@ -46,7 +48,7 @@ function makeAutocompleter( completers ) {
 					aria-activedescendant={ activeId }
 				/>
 			)
-		}</Autocomplete>
+		}</AutocompleteComponent>
 	);
 }
 
@@ -420,6 +422,18 @@ describe( 'Autocomplete', () => {
 			} );
 		} );
 
+		it( 'closes by blur', () => {
+			jest.spyOn( Autocomplete.prototype, 'handleFocusOutside' );
+
+			const wrapper = makeAutocompleter( [], EnhancedAutocomplete );
+			simulateInput( wrapper, [ par( tx( '/' ) ) ] );
+			wrapper.find( '.fake-editor' ).simulate( 'blur' );
+
+			jest.runAllTimers();
+
+			expect( Autocomplete.prototype.handleFocusOutside ).toHaveBeenCalled();
+		} );
+
 		it( 'selects by enter', ( done ) => {
 			const onSelect = jest.fn();
 			const wrapper = makeAutocompleter( [ { ...slashCompleter, onSelect } ] );