Trim search box input (https://github.com/woocommerce/woocommerce-admin/pull/1439)

* Trim search box input

* Add tests

plugins/woocommerce-admin/packages/components/src/search/autocomplete.js

@@ -132,6 +132,16 @@ export class Autocomplete extends Component {
 	loadOptions( completer, query ) {
 		const { options } = completer;
 
+		if ( ! query ) {
+			this.setState( {
+				options: [],
+				filteredOptions: [],
+				selectedIndex: 0,
+			} );
+
+			return;
+		}
+
 		/*
 		 * We support both synchronous and asynchronous retrieval of completer options
 		 * but internally treat all as async so we maintain a single, consistent code path.
@@ -171,9 +181,7 @@ export class Autocomplete extends Component {
 				filteredOptions,
 				selectedIndex,
 			} );
-			if ( query ) {
-				this.announce( filteredOptions );
-			}
+			this.announce( filteredOptions );
 		} ) );
 	}
 
@@ -183,7 +191,7 @@ export class Autocomplete extends Component {
 		const container = event.target;
 
 		// look for the trigger prefix and search query just before the cursor location
-		const query = container.value;
+		const query = container.value.trim();
 		// asynchronously load the options for the open completer
 		if ( completer && query !== wasQuery ) {
 			if ( completer.isDebounced ) {

plugins/woocommerce-admin/packages/components/src/search/test/autocomplete.js

@@ -3,6 +3,7 @@
  * External dependencies
  */
 import { mount } from 'enzyme';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,19 +11,43 @@ import { mount } from 'enzyme';
 import { Autocomplete } from '../autocomplete';
 
 describe( 'Autocomplete', () => {
+	const suggestionClassname = 'autocomplete-result';
+	const search = 'lorem';
+	const options = [
+		{ key: '1', label: 'lorem 1', value: { id: '1' } },
+		{ key: '2', label: 'lorem 2', value: { id: '2' } },
+		{ key: '3', label: 'bar', value: { id: '3' } },
+	];
+
+	it( 'returns matching elements', () => {
+		const autocomplete = mount(
+			<Autocomplete
+				children={ () => null }
+				completer={ {
+					className: suggestionClassname,
+				} }
+			/>
+		);
+		autocomplete.setState( {
+			options,
+			query: {},
+			search,
+		} );
+
+		autocomplete.instance().search( { target: { value: search } } );
+		autocomplete.update();
+
+		expect( autocomplete.find( Button ).filter( '.' + suggestionClassname ).length ).toBe( 2 );
+	} );
+
 	it( 'doesn\'t return matching excluded elements', () => {
-		const suggestionClassname = 'autocomplete-result';
-		const search = 'lorem';
-		const options = [
-			{ key: '1', label: 'lorem 1', value: { id: '1' } },
-			{ key: '2', label: 'lorem 2', value: { id: '2' } },
-		];
 		const exclude = [ '2' ];
 		const autocomplete = mount(
 			<Autocomplete
 				children={ () => null }
-				className={ suggestionClassname }
-				completer={ {} }
+				completer={ {
+					className: suggestionClassname,
+				} }
 				selected={ exclude }
 			/>
 		);
@@ -35,6 +60,27 @@ describe( 'Autocomplete', () => {
 		autocomplete.instance().search( { target: { value: search } } );
 		autocomplete.update();
 
-		expect( autocomplete.find( '.' + suggestionClassname ).length ).toBe( 1 );
+		expect( autocomplete.find( Button ).filter( '.' + suggestionClassname ).length ).toBe( 1 );
+	} );
+
+	it( 'trims spaces from input', () => {
+		const autocomplete = mount(
+			<Autocomplete
+				children={ () => null }
+				completer={ {
+					className: suggestionClassname,
+				} }
+			/>
+		);
+		autocomplete.setState( {
+			options,
+			query: {},
+			search,
+		} );
+
+		autocomplete.instance().search( { target: { value: '    ' + search + ' ' } } );
+		autocomplete.update();
+
+		expect( autocomplete.find( Button ).filter( '.' + suggestionClassname ).length ).toBe( 2 );
 	} );
 } );