Merge pull request #3174 from WordPress/fix/autocomplete-click

Components: Fix autocomplete menu click behavior
WordPress · Oct 27, 2017 · 18dfb29 · 18dfb29
2 parents f7b8a1c + 081f47e
commit 18dfb29
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
@@ -31,7 +31,7 @@ class Autocomplete extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.bindNode = this.bindNode.bind( this );
+		this.bindMenuNode = this.bindMenuNode.bind( this );
 		this.select = this.select.bind( this );
 		this.reset = this.reset.bind( this );
 		this.onBlur = this.onBlur.bind( this );
@@ -41,8 +41,8 @@ class Autocomplete extends Component {
 		this.state = this.constructor.getInitialState();
 	}
 
-	bindNode( node ) {
-		this.node = node;
+	bindMenuNode( node ) {
+		this.menuNode = node;
 	}
 
 	select( option ) {
@@ -62,7 +62,7 @@ class Autocomplete extends Component {
 	onBlur( event ) {
 		// Check if related target is not within, in the case that the user is
 		// selecting an option by button click
-		if ( ! this.node.contains( event.relatedTarget ) ) {
+		if ( ! this.menuNode.contains( event.relatedTarget ) ) {
 			this.reset();
 		}
 	}
@@ -189,7 +189,6 @@ class Autocomplete extends Component {
 		// the event will not have `relatedTarget` assigned.
 		return (
 			<div
-				ref={ this.bindNode }
 				onBlur={ this.onBlur }
 				className="components-autocomplete"
 			>
@@ -206,6 +205,7 @@ class Autocomplete extends Component {
 					<ul
 						role="menu"
 						className="components-autocomplete__results"
+						ref={ this.bindMenuNode }
 					>
 						{ filteredOptions.map( ( option, index ) => (
 							<li

diff --git a/components/autocomplete/test/index.js b/components/autocomplete/test/index.js
@@ -290,6 +290,30 @@ describe( 'Autocomplete', () => {
 			expect( onSelect ).toHaveBeenCalledWith( options[ 0 ] );
 		} );
 
+		it( 'selects by click', () => {
+			const onSelect = jest.fn();
+			const wrapper = shallow(
+				<Autocomplete
+					options={ options }
+					triggerPrefix="/"
+					onSelect={ onSelect }
+				>
+					<div contentEditable />
+				</Autocomplete>
+			);
+
+			wrapper.find( '[contentEditable]' ).simulate( 'input', {
+				target: {
+					textContent: '/',
+				},
+			} );
+
+			wrapper.find( 'li' ).at( 0 ).find( 'Button' ).simulate( 'click' );
+
+			expect( wrapper.state() ).toEqual( Autocomplete.getInitialState() );
+			expect( onSelect ).toHaveBeenCalledWith( options[ 0 ] );
+		} );
+
 		it( 'doesn\'t otherwise interfere with keydown behavior', () => {
 			const preventDefault = jest.fn();
 			const stopImmediatePropagation = jest.fn();