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:
commit
36a9e78ea9
|
@ -14,6 +14,8 @@
|
||||||
- Number of selectable chart elements is now limited to 5.
|
- Number of selectable chart elements is now limited to 5.
|
||||||
- Color scale logic for charts with lots of items has been fixed.
|
- Color scale logic for charts with lots of items has been fixed.
|
||||||
- Update `@woocommerce/navigation` to v2.0.0
|
- 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
|
# 1.4.2
|
||||||
- Add emoji-flags dependency
|
- Add emoji-flags dependency
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
*/
|
*/
|
||||||
import { Component, Fragment } from '@wordpress/element';
|
import { Component, Fragment } from '@wordpress/element';
|
||||||
import { SelectControl } from '@wordpress/components';
|
import { SelectControl } from '@wordpress/components';
|
||||||
|
import { getIdsFromQuery } from '@woocommerce/navigation';
|
||||||
import { find, isEqual, partial } from 'lodash';
|
import { find, isEqual, partial } from 'lodash';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import interpolateComponents from 'interpolate-components';
|
import interpolateComponents from 'interpolate-components';
|
||||||
|
@ -35,9 +36,16 @@ class SearchFilter extends Component {
|
||||||
const { filter: prevFilter } = prevProps;
|
const { filter: prevFilter } = prevProps;
|
||||||
|
|
||||||
if ( filter.value.length && ! isEqual( prevFilter, filter ) ) {
|
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 );
|
config.input.getLabels( filter.value, query ).then( this.updateLabels );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
updateLabels( selected ) {
|
updateLabels( selected ) {
|
||||||
const prevIds = this.state.selected.map( item => item.id );
|
const prevIds = this.state.selected.map( item => item.id );
|
||||||
|
|
|
@ -50,6 +50,7 @@ class Search extends Component {
|
||||||
this.updateSearch = this.updateSearch.bind( this );
|
this.updateSearch = this.updateSearch.bind( this );
|
||||||
this.onFocus = this.onFocus.bind( this );
|
this.onFocus = this.onFocus.bind( this );
|
||||||
this.onBlur = this.onBlur.bind( this );
|
this.onBlur = this.onBlur.bind( this );
|
||||||
|
this.onKeyDown = this.onKeyDown.bind( this );
|
||||||
}
|
}
|
||||||
|
|
||||||
selectResult( value ) {
|
selectResult( value ) {
|
||||||
|
@ -154,6 +155,15 @@ class Search extends Component {
|
||||||
this.setState( { isActive: false } );
|
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() {
|
render() {
|
||||||
const autocompleter = this.getAutocompleter();
|
const autocompleter = this.getAutocompleter();
|
||||||
const {
|
const {
|
||||||
|
@ -221,6 +231,7 @@ class Search extends Component {
|
||||||
aria-activedescendant={ activeId }
|
aria-activedescendant={ activeId }
|
||||||
onFocus={ this.onFocus }
|
onFocus={ this.onFocus }
|
||||||
onBlur={ this.onBlur }
|
onBlur={ this.onBlur }
|
||||||
|
onKeyDown={ this.onKeyDown }
|
||||||
aria-describedby={
|
aria-describedby={
|
||||||
shouldRenderTags ? `search-inline-input-${ instanceId }` : null
|
shouldRenderTags ? `search-inline-input-${ instanceId }` : null
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue