Merge pull request woocommerce/woocommerce-admin#1519 from woocommerce/fix/1352-backspace-remove-item

Remove items from search input with backspace key

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -14,6 +14,8 @@
 - Number of selectable chart elements is now limited to 5.
 - Color scale logic for charts with lots of items has been fixed.
 - Update `@woocommerce/navigation` to v2.0.0
+- Bug fix for `<StockReportTable />` returning N/A instead of zero.
+- In `<Search>` use backspace key to remove tags from the search box.
 
 # 1.4.2
 - Add emoji-flags dependency

plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js

@@ -4,6 +4,7 @@
  */
 import { Component, Fragment } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
+import { getIdsFromQuery } from '@woocommerce/navigation';
 import { find, isEqual, partial } from 'lodash';
 import PropTypes from 'prop-types';
 import interpolateComponents from 'interpolate-components';
@@ -35,9 +36,16 @@ class SearchFilter extends Component {
 		const { filter: prevFilter } = prevProps;
 
 		if ( filter.value.length && ! isEqual( prevFilter, filter ) ) {
+			const { selected } = this.state;
+			const ids = selected.map( item => item.id );
+			const filterIds = getIdsFromQuery( filter.value );
+			const hasNewIds = filterIds.every( ( id ) => ! ids.includes( id ) );
+
+			if ( hasNewIds ) {
 				config.input.getLabels( filter.value, query ).then( this.updateLabels );
 			}
 		}
+	}
 
 	updateLabels( selected ) {
 		const prevIds = this.state.selected.map( item => item.id );

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

@@ -50,6 +50,7 @@ class Search extends Component {
 		this.updateSearch = this.updateSearch.bind( this );
 		this.onFocus = this.onFocus.bind( this );
 		this.onBlur = this.onBlur.bind( this );
+		this.onKeyDown = this.onKeyDown.bind( this );
 	}
 
 	selectResult( value ) {
@@ -154,6 +155,15 @@ class Search extends Component {
 		this.setState( { isActive: false } );
 	}
 
+	onKeyDown( event ) {
+		const { value } = this.state;
+		const { selected, onChange } = this.props;
+
+		if ( 8 === event.keyCode && ! value && selected.length ) {
+			onChange( [ ...selected.slice( 0, -1 ) ] );
+		}
+	}
+
 	render() {
 		const autocompleter = this.getAutocompleter();
 		const {
@@ -221,6 +231,7 @@ class Search extends Component {
 										aria-activedescendant={ activeId }
 										onFocus={ this.onFocus }
 										onBlur={ this.onBlur }
+										onKeyDown={ this.onKeyDown }
 										aria-describedby={
 											shouldRenderTags ? `search-inline-input-${ instanceId }` : null
 										}