From 1a8e797b0083e731bd4f51f615c72e020cc9dec3 Mon Sep 17 00:00:00 2001 From: Tiago Noronha Date: Mon, 11 Feb 2019 15:46:51 +0000 Subject: [PATCH] Remove items from search input with backspace key --- .../packages/components/src/search/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/plugins/woocommerce-admin/packages/components/src/search/index.js b/plugins/woocommerce-admin/packages/components/src/search/index.js index 12427a04705..de41649c238 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 { @@ -220,6 +230,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 }