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

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Replaced usage of `displayName` with `inputValue` prop in `EuiFieldSearch` ([#3497](https://github.com/elastic/eui/pull/3497))
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))

src/components/form/field_search/field_search.tsx

@@ -113,6 +113,17 @@ 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,
+        });
+      }
+    };
+    this.inputElement.addEventListener('change', onChange);
   }
 
   onClear = () => {

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