Autocomplete: Implement and use focus outside utility for managing dismissal

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;
 
@@ -436,4 +440,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 } ] );

components/higher-order/with-focus-outside/README.md

@@ -0,0 +1,30 @@
+# withFocusOutside
+
+`withFocusOutside` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) to enable behavior to occur when focus leaves an element. Since a `blur` event will fire in React even when focus transitions to another element in the same context, this higher-order component encapsulates the logic necessary to determine if focus has truly left the element.
+
+## Usage
+
+Wrap your original component with `withFocusOutside`, defining a `handleFocusOutside` instance method on the component class.
+
+__Note:__ `withFocusOutside` must only be used to wrap the `Component` class.
+
+```jsx
+const EnhancedComponent = withFocusOutside(
+	class extends Component {
+		handleFocusOutside() {
+			this.props.onFocusOutside();
+		}
+
+		render() {
+			return (
+				<div>
+					<input />
+					<input />
+				</div>
+			);
+		}
+	}
+);
+```
+
+In the above example, the `handleFocusOutside` function is only called if focus leaves the element, and not if transitioning focus between the two inputs.

components/higher-order/with-focus-outside/index.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+function withFocusOutside( WrappedComponent ) {
+	return class extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.bindNode = this.bindNode.bind( this );
+			this.cancelBlurCheck = this.cancelBlurCheck.bind( this );
+			this.queueBlurCheck = this.queueBlurCheck.bind( this );
+		}
+
+		componentWillUnmount() {
+			this.cancelBlurCheck();
+		}
+
+		bindNode( node ) {
+			if ( node ) {
+				this.node = node;
+			} else {
+				delete this.node;
+				this.cancelBlurCheck();
+			}
+		}
+
+		queueBlurCheck( event ) {
+			this.isBlurring = true;
+			this.blurCheckTimeout = setTimeout( () => {
+				if ( 'function' === typeof this.node.handleFocusOutside ) {
+					this.node.handleFocusOutside( event );
+				}
+			}, 0 );
+		}
+
+		cancelBlurCheck() {
+			delete this.isBlurring;
+			clearTimeout( this.blurCheckTimeout );
+		}
+
+		render() {
+			return (
+				<div
+					onFocus={ this.cancelBlurCheck }
+					onBlur={ this.queueBlurCheck }
+				>
+					<WrappedComponent
+						ref={ this.bindNode }
+						{ ...this.props } />
+				</div>
+			);
+		}
+	};
+}
+
+export default withFocusOutside;

components/higher-order/with-focus-outside/test/index.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import withFocusOutside from '../';
+
+jest.useFakeTimers();
+
+describe( 'withFocusOutside', () => {
+	const EnhancedComponent = withFocusOutside(
+		class extends Component {
+			handleFocusOutside() {
+				this.props.onFocusOutside();
+			}
+
+			render() {
+				return (
+					<div>
+						<input />
+						<input />
+					</div>
+				);
+			}
+		}
+	);
+
+	it( 'should not call handler if focus shifts to element within component', () => {
+		const callback = jest.fn();
+		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+
+		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
+		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
+		wrapper.find( 'input' ).at( 1 ).simulate( 'focus' );
+
+		jest.runAllTimers();
+
+		expect( callback ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should call handler if focus doesn\'t shift to element within component', () => {
+		const callback = jest.fn();
+		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+
+		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
+		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
+
+		jest.runAllTimers();
+
+		expect( callback ).toHaveBeenCalled();
+	} );
+
+	it( 'should cancel check when unmounting while queued', () => {
+		const callback = jest.fn();
+		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+
+		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
+		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
+		wrapper.unmount();
+
+		jest.runAllTimers();
+
+		expect( callback ).not.toHaveBeenCalled();
+	} );
+} );

components/index.js

@@ -33,6 +33,7 @@ export { Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 // Higher-Order Components
 export { default as navigateRegions } from './higher-order/navigate-regions';
 export { default as withAPIData } from './higher-order/with-api-data';
+export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';