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

Remove items from search input with backspace key
This commit is contained in:
Tiago Noronha 2019-02-28 12:04:18 +00:00 committed by GitHub
commit 36a9e78ea9
3 changed files with 22 additions and 1 deletions

View File

@ -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

View File

@ -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 );

View File

@ -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
}