Added isClearable prop to EuiFieldSearch

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Converted `EuiSuggest` to Typescript ([#2692](https://github.com/elastic/eui/pull/2692))
 - Converted `EuiErrorBoundary` to Typescript  ([#2690](https://github.com/elastic/eui/pull/2690))
 - Updated `EuiNavDrawer` to accept React fragments ([#2710](https://github.com/elastic/eui/pull/2710))
+- Added `isClearable` prop to `EuiFieldSearch` ([#2723](https://github.com/elastic/eui/pull/2723))
 
 **Bug fixes**
 

src-docs/src/views/form_controls/display_toggles.js

@@ -27,6 +27,7 @@ export class DisplayToggles extends Component {
       append: false,
       isPopoverOpen: false,
       invalid: false,
+      isClearable: false,
     };
   }
 
@@ -48,6 +49,7 @@ export class DisplayToggles extends Component {
       canPrepend,
       canAppend,
       canInvalid,
+      canClear,
       children,
       extras,
     } = this.props;
@@ -59,6 +61,7 @@ export class DisplayToggles extends Component {
     if (canLoading) canProps.isLoading = this.state.loading;
     if (canFullWidth) canProps.fullWidth = this.state.fullWidth;
     if (canCompressed) canProps.compressed = this.state.compressed;
+    if (canClear) canProps.isClearable = this.state.isClearable;
     if (canPrepend && this.state.prepend) canProps.prepend = 'Prepend';
     if (canAppend && this.state.append) canProps.append = 'Append';
     if (canInvalid) canProps.isInvalid = this.state.invalid;
@@ -145,6 +148,18 @@ export class DisplayToggles extends Component {
                   />
                 </EuiFlexItem>
               )}
+              {canClear && (
+                <EuiFlexItem grow={false}>
+                  <EuiSwitch
+                    compressed
+                    label={'clearable'}
+                    checked={this.state.isClearable}
+                    onChange={e =>
+                      this.updateProperty(e.target.checked, 'isClearable')
+                    }
+                  />
+                </EuiFlexItem>
+              )}
               {canCompressed && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch

src-docs/src/views/form_controls/field_search.js

@@ -14,14 +14,14 @@ export default class extends Component {
 
   onChange = e => {
     this.setState({
-      value: e.target.value,
+      value: e === '' ? '' : e.target.value,
     });
   };
 
   render() {
     return (
       /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles>
+      <DisplayToggles canClear>
         <EuiFieldSearch
           placeholder="Search this"
           value={this.state.value}

src/components/form/field_search/__snapshots__/field_search.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`EuiFieldSearch is rendered 1`] = `
 <eui-form-control-layout
+  clear="[object Object]"
   compressed="false"
   fullwidth="false"
   icon="search"

src/components/form/field_search/_field_search.scss

@@ -1,7 +1,8 @@
 /*
  * 1. Fix for Safari to ensure that it renders like a normal text input
  *    and doesn't add extra spacing around text
- */
+ * 2. Remove the X clear button from input type search in Chrome and IE
+*/
 
 .euiFieldSearch {
   @include euiFormControlStyle;
@@ -11,11 +12,16 @@
   // sass-lint:disable-block no-vendor-prefixes
   -webkit-appearance: textfield; /* 1 */
 
-  &::-webkit-search-decoration {
-    -webkit-appearance: none;  /* 1 */
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;  /* 1, 2 */
+  }
+
+  &::-ms-clear {
+    display: none; /* 2 */
   }
 
   &.euiFieldSearch--compressed {
     @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
   }
-}
+}

src/components/form/field_search/field_search.js

@@ -31,13 +31,18 @@ const propTypes = {
    * when `true` creates a shorter height input
    */
   compressed: PropTypes.bool,
+  /**
+   * Shows a clear button when set to true
+   */
+  isClearable: PropTypes.bool,
 };
 
 const defaultProps = {
   fullWidth: false,
   isLoading: false,
   incremental: false,
   compressed: false,
+  isClearable: true,
 };
 
 export class EuiFieldSearch extends Component {
@@ -63,6 +68,11 @@ export class EuiFieldSearch extends Component {
     }
   }
 
+  onClear = () => {
+    this.props.onChange('');
+    this.inputElement.focus();
+  };
+
   componentWillUnmount() {
     this.cleanups.forEach(cleanup => cleanup());
   }
@@ -100,6 +110,7 @@ export class EuiFieldSearch extends Component {
       incremental,
       compressed,
       onSearch,
+      isClearable,
       ...rest
     } = this.props;
 
@@ -118,6 +129,11 @@ export class EuiFieldSearch extends Component {
         icon="search"
         fullWidth={fullWidth}
         isLoading={isLoading}
+        clear={
+          isClearable && value && !rest.readOnly && !rest.disabled
+            ? { onClick: this.onClear }
+            : null
+        }
         compressed={compressed}>
         <EuiValidatableControl isInvalid={isInvalid}>
           <input

src/components/search_bar/__snapshots__/search_box.test.js.snap

@@ -10,6 +10,7 @@ exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
   fullWidth={true}
   incremental={true}
   inputRef={[Function]}
+  isClearable={true}
   isLoading={false}
   onSearch={[Function]}
   placeholder="..."
@@ -26,6 +27,7 @@ exports[`EuiSearchBox render - no config 1`] = `
   fullWidth={true}
   incremental={false}
   inputRef={[Function]}
+  isClearable={true}
   isLoading={false}
   onSearch={[Function]}
   placeholder="Search..."