diff --git a/CHANGELOG.md b/CHANGELOG.md index be8a23cf810..1295f044732 100644 --- 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 index c08d6e1234b..3966c137b57 100644 --- 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 index 04fd9003071..6b6fcdfcdc7 100644 --- 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 { 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 index bb786765df0..a8d47012db5 100644 --- 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"