Add 'Clear' button to Search input (https://github.com/woocommerce/woocommerce-admin/pull/1410)

* Move labels loading logic into a lib

* Move lib/labels into lib/async-requests

* Implement tabular data filtering

* Allow searching for string in report tables

* Add table filtering to customers table

* Get ids from searched string to populate the table

* Fix autocompleter keyboard interactions

* Improve props naming

* Cleanup report customers data store

* Prevent an edge case issue that might not update the selectedOptions when directily modifying the URL

* Add 'Clear' button to Search input

* Cleanup

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 - Chart component: format numbers and prices using store currency settings.
 - Make `href`/linking optional in SummaryNumber.
 - Fix SummaryNumber example code.
+- New `<Search>` prop named `showClearButton`, that will display a 'Clear' button when the search box contains one or more tags.
 
 # 1.4.0
 - Add download log ip address autocompleter to search component

plugins/woocommerce-admin/packages/components/src/search/index.js

@@ -4,6 +4,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Component, createRef, Fragment } from '@wordpress/element';
+import { Button, Icon } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 import { findIndex, noop } from 'lodash';
 import Gridicon from 'gridicons';
@@ -44,6 +45,7 @@ class Search extends Component {
 		this.input = createRef();
 
 		this.selectResult = this.selectResult.bind( this );
+		this.removeAll = this.removeAll.bind( this );
 		this.removeResult = this.removeResult.bind( this );
 		this.updateSearch = this.updateSearch.bind( this );
 		this.onFocus = this.onFocus.bind( this );
@@ -60,6 +62,11 @@ class Search extends Component {
 		}
 	}
 
+	removeAll() {
+		const { onChange } = this.props;
+		onChange( [] );
+	}
+
 	removeResult( id ) {
 		return () => {
 			const { selected, onChange } = this.props;
@@ -149,7 +156,16 @@ class Search extends Component {
 
 	render() {
 		const autocompleter = this.getAutocompleter();
-		const { allowFreeTextSearch, placeholder, inlineTags, selected, instanceId, className, staticResults } = this.props;
+		const {
+			allowFreeTextSearch,
+			className,
+			inlineTags,
+			instanceId,
+			placeholder,
+			selected,
+			showClearButton,
+			staticResults,
+		} = this.props;
 		const { value = '', isActive } = this.state;
 		const aria = {
 			'aria-labelledby': this.props[ 'aria-labelledby' ],
@@ -232,6 +248,16 @@ class Search extends Component {
 					}
 				</Autocomplete>
 				{ ! inlineTags && this.renderTags() }
+				{ showClearButton && shouldRenderTags ? (
+					<Button
+						className="woocommerce-search__clear"
+						isLink
+						onClick={ this.removeAll }
+					>
+						<Icon icon="dismiss" />
+						<span className="screen-reader-text">{ __( 'Clear all', 'wc-admin' ) }</span>
+					</Button>
+				) : null }
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
@@ -289,6 +315,10 @@ Search.propTypes = {
 	 * Render tags inside input, otherwise render below input.
 	 */
 	inlineTags: PropTypes.bool,
+	/**
+	 * Render a 'Clear' button next to the input box to remove its contents.
+	 */
+	showClearButton: PropTypes.bool,
 	/**
 	 * Render results list positioned statically instead of absolutely.
 	 */
@@ -300,6 +330,7 @@ Search.defaultProps = {
 	onChange: noop,
 	selected: [],
 	inlineTags: false,
+	showClearButton: false,
 	staticResults: false,
 };
 

plugins/woocommerce-admin/packages/components/src/search/style.scss

@@ -127,3 +127,13 @@
 .woocommerce-search__result-name {
 	text-decoration: underline; // @todo Not actually a link, should underline?
 }
+
+.woocommerce-search__clear {
+	position: absolute;
+	right: 10px;
+	top: calc( 50% - 10px );
+
+	& > .dashicon {
+		color: #c9c9c9;
+	}
+}

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -287,6 +287,7 @@ class TableCard extends Component {
 							onChange={ this.onSearch }
 							placeholder={ labels.placeholder || __( 'Search by item name', 'wc-admin' ) }
 							selected={ searchedLabels }
+							showClearButton={ true }
 							type={ searchBy }
 						/>
 					),