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 <thompson.glowe@gmail.com>

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))

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: '' });
 

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'));
  }
  }
 

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"