From afa7cc082256afda2b0dc20f616868f474bd7fc2 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 1 Jan 2020 11:00:46 -0800
Subject: [PATCH 1/4] added clearable prop to EuiFieldSearch

---
 .../src/views/form_controls/display_toggles.js    | 15 +++++++++++++++
 src-docs/src/views/form_controls/field_search.js  |  4 ++--
 .../form/field_search/_field_search.scss          | 14 ++++++++++----
 src/components/form/field_search/field_search.js  | 12 ++++++++++++
 .../__snapshots__/search_box.test.js.snap         |  2 ++
 5 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js
index c126cd96f56..4df62ce2ecd 100644
--- a/src-docs/src/views/form_controls/display_toggles.js
+++ b/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
diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
index a08729a6eb2..722808a7cba 100644
--- a/src-docs/src/views/form_controls/field_search.js
+++ b/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}
diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss
index 3e70864dfc4..91a78804d3c 100644
--- a/src/components/form/field_search/_field_search.scss
+++ b/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);
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js
index b5132e7f840..9db1bf482d3 100644
--- a/src/components/form/field_search/field_search.js
+++ b/src/components/form/field_search/field_search.js
@@ -31,6 +31,10 @@ 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 = {
@@ -38,6 +42,7 @@ const defaultProps = {
   isLoading: false,
   incremental: false,
   compressed: false,
+  isClearable: false,
 };
 
 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,7 @@ export class EuiFieldSearch extends Component {
         icon="search"
         fullWidth={fullWidth}
         isLoading={isLoading}
+        clear={isClearable && value ? { onClick: this.onClear } : null}
         compressed={compressed}>
         <EuiValidatableControl isInvalid={isInvalid}>
           <input
diff --git a/src/components/search_bar/__snapshots__/search_box.test.js.snap b/src/components/search_bar/__snapshots__/search_box.test.js.snap
index 150ff9a6f54..fd700c1b205 100644
--- a/src/components/search_bar/__snapshots__/search_box.test.js.snap
+++ b/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={false}
   isLoading={false}
   onSearch={[Function]}
   placeholder="..."
@@ -26,6 +27,7 @@ exports[`EuiSearchBox render - no config 1`] = `
   fullWidth={true}
   incremental={false}
   inputRef={[Function]}
+  isClearable={false}
   isLoading={false}
   onSearch={[Function]}
   placeholder="Search..."

From b9c6c0b036bd5cc399e203d0e29668e957bf825d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 1 Jan 2020 11:35:45 -0800
Subject: [PATCH 2/4] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c52426ad960..97ab57ce4ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Added `tableLayout` prop to `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` to provide the option of auto layout ([#2697](https://github.com/elastic/eui/pull/2697))
 - Converted `EuiSuggest` to Typescript ([#2692](https://github.com/elastic/eui/pull/2692))
 - Converted `EuiErrorBoundary` to Typescript  ([#2690](https://github.com/elastic/eui/pull/2690))
+- Added `isClearable` prop to `EuiFieldSearch` ([#2723](https://github.com/elastic/eui/pull/2723))
 
 **Bug fixes**
 

From c29f216306557d03ac197a957483a209444f3ab7 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 2 Jan 2020 10:40:20 -0800
Subject: [PATCH 3/4] PR feedback

---
 .../field_search/__snapshots__/field_search.test.js.snap  | 1 +
 src/components/form/field_search/field_search.js          | 8 ++++++--
 .../search_bar/__snapshots__/search_box.test.js.snap      | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/form/field_search/__snapshots__/field_search.test.js.snap b/src/components/form/field_search/__snapshots__/field_search.test.js.snap
index f674fd59e13..6d3eb2848ea 100644
--- a/src/components/form/field_search/__snapshots__/field_search.test.js.snap
+++ b/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"
diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js
index 9db1bf482d3..d536bb2185f 100644
--- a/src/components/form/field_search/field_search.js
+++ b/src/components/form/field_search/field_search.js
@@ -42,7 +42,7 @@ const defaultProps = {
   isLoading: false,
   incremental: false,
   compressed: false,
-  isClearable: false,
+  isClearable: true,
 };
 
 export class EuiFieldSearch extends Component {
@@ -129,7 +129,11 @@ export class EuiFieldSearch extends Component {
         icon="search"
         fullWidth={fullWidth}
         isLoading={isLoading}
-        clear={isClearable && value ? { onClick: this.onClear } : null}
+        clear={
+          isClearable && value && !rest.readOnly && !rest.disabled
+            ? { onClick: this.onClear }
+            : null
+        }
         compressed={compressed}>
         <EuiValidatableControl isInvalid={isInvalid}>
           <input
diff --git a/src/components/search_bar/__snapshots__/search_box.test.js.snap b/src/components/search_bar/__snapshots__/search_box.test.js.snap
index fd700c1b205..7b0248a3764 100644
--- a/src/components/search_bar/__snapshots__/search_box.test.js.snap
+++ b/src/components/search_bar/__snapshots__/search_box.test.js.snap
@@ -10,7 +10,7 @@ exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
   fullWidth={true}
   incremental={true}
   inputRef={[Function]}
-  isClearable={false}
+  isClearable={true}
   isLoading={false}
   onSearch={[Function]}
   placeholder="..."
@@ -27,7 +27,7 @@ exports[`EuiSearchBox render - no config 1`] = `
   fullWidth={true}
   incremental={false}
   inputRef={[Function]}
-  isClearable={false}
+  isClearable={true}
   isLoading={false}
   onSearch={[Function]}
   placeholder="Search..."

From e78eed0bf924919e20be42e24eb1fdde25735f79 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 2 Jan 2020 17:56:36 -0800
Subject: [PATCH 4/4] gave clearable a custom toggle

---
 .../src/views/form_controls/display_toggles.js   | 15 ---------------
 src-docs/src/views/form_controls/field_search.js | 16 ++++++++++++++--
 src/components/form/field_search/field_search.js |  2 +-
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js
index 4df62ce2ecd..c126cd96f56 100644
--- a/src-docs/src/views/form_controls/display_toggles.js
+++ b/src-docs/src/views/form_controls/display_toggles.js
@@ -27,7 +27,6 @@ export class DisplayToggles extends Component {
       append: false,
       isPopoverOpen: false,
       invalid: false,
-      isClearable: false,
     };
   }
 
@@ -49,7 +48,6 @@ export class DisplayToggles extends Component {
       canPrepend,
       canAppend,
       canInvalid,
-      canClear,
       children,
       extras,
     } = this.props;
@@ -61,7 +59,6 @@ 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;
@@ -148,18 +145,6 @@ 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
diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
index 722808a7cba..14afc92027e 100644
--- a/src-docs/src/views/form_controls/field_search.js
+++ b/src-docs/src/views/form_controls/field_search.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { EuiFieldSearch } from '../../../../src/components';
+import { EuiFieldSearch, EuiSwitch } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
 export default class extends Component {
@@ -8,6 +8,7 @@ export default class extends Component {
     super(props);
 
     this.state = {
+      isClearable: true,
       value: '',
     };
   }
@@ -21,11 +22,22 @@ export default class extends Component {
   render() {
     return (
       /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles canClear>
+      <DisplayToggles
+        extras={[
+          <EuiSwitch
+            compressed
+            label={'clearable'}
+            checked={this.state.isClearable}
+            onChange={e => {
+              this.setState({ isClearable: e.target.checked });
+            }}
+          />,
+        ]}>
         <EuiFieldSearch
           placeholder="Search this"
           value={this.state.value}
           onChange={this.onChange}
+          isClearable={this.state.isClearable}
           aria-label="Use aria labels when no actual label is in use"
         />
       </DisplayToggles>
diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js
index d536bb2185f..f9acc8d706b 100644
--- a/src/components/form/field_search/field_search.js
+++ b/src/components/form/field_search/field_search.js
@@ -32,7 +32,7 @@ const propTypes = {
    */
   compressed: PropTypes.bool,
   /**
-   * Shows a clear button when set to true
+   * Shows a button that quickly clears any input
    */
   isClearable: PropTypes.bool,
 };