diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index 478a3ce29fb..be38b7cd7a8 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/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 `` returning N/A instead of zero.
+- In `` use backspace key to remove tags from the search box.
# 1.4.2
- Add emoji-flags dependency
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
index d105d4c5dff..550c0af1094 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
+++ b/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,7 +36,14 @@ class SearchFilter extends Component {
const { filter: prevFilter } = prevProps;
if ( filter.value.length && ! isEqual( prevFilter, filter ) ) {
- config.input.getLabels( filter.value, query ).then( this.updateLabels );
+ 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 );
+ }
}
}
diff --git a/plugins/woocommerce-admin/packages/components/src/search/index.js b/plugins/woocommerce-admin/packages/components/src/search/index.js
index 0d97d4eed2a..96fc8f82979 100644
--- a/plugins/woocommerce-admin/packages/components/src/search/index.js
+++ b/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
}