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 }