Fixed clear button not showing when external input value is passed. (#…

…3497) * Replace default value with input value * Updated snapshots * Added cl * Revert changes * Updated snapshots * Added event to track changes to element * Clear search on vlear button * CL Co-authored-by: Greg Thompson <[email protected]>
elastic · Jun 4, 2020 · 33d87de · 33d87de
1 parent fa2916e
commit 33d87de
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
+- Fixed `EuiFieldSearch` input clear button doesn't show when external input is passed([#3497](https://github.com/elastic/eui/pull/3497))
 
 **Breaking changes**
 
@@ -30,7 +31,6 @@
 
 **Bug Fixes**
 
-
 - Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335))
 - Fixed `EuiSuperSelect` not rendering full width when `isOpen` is `true` ([#3495](https://github.com/elastic/eui/pull/3495))
 - Fixed `EuiBasicTable` shows no items if all items of last page is deleted  ([#3422](https://github.com/elastic/eui/pull/3422))

diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx
@@ -113,6 +113,20 @@ export class EuiFieldSearch extends Component<
         this.inputElement.removeEventListener('search', onSearch);
       });
     }
+    const onChange = (event: Event) => {
+      if (
+        event.target &&
+        (event.target as HTMLInputElement).value !== this.state.value
+      ) {
+        this.setState({
+          value: (event.target as HTMLInputElement).value,
+        });
+        if (this.props.onSearch) {
+          this.props.onSearch((event.target as HTMLInputElement).value);
+        }
+      }
+    };
+    this.inputElement.addEventListener('change', onChange);
   }
 
   onClear = () => {
@@ -156,6 +170,7 @@ export class EuiFieldSearch extends Component<
       }
       // set focus on the search field
       this.inputElement.focus();
+      this.inputElement.dispatchEvent(new Event('change'));
     }
     this.setState({ value: '' });
 

diff --git a/src/components/search_bar/search_box.tsx b/src/components/search_bar/search_box.tsx
@@ -45,6 +45,7 @@ export class EuiSearchBox extends Component<EuiSearchBoxProps> {
   componentDidUpdate(oldProps: EuiSearchBoxProps) {
     if (oldProps.query !== this.props.query && this.inputElement != null) {
       this.inputElement.value = this.props.query;
+      this.inputElement.dispatchEvent(new Event('change'));
     }
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -1248,7 +1248,6 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
-
 "@types/node@*", "@types/node@^10.17.5":
   version "10.17.24"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.24.tgz#c57511e3a19c4b5e9692bb2995c40a3a52167944"