Fix EuiFieldSearch's onChange call so it is always called with the Event

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `18.2.0`.
+**Bug fixes**
+
+- Fixed `EuiFieldSearch`'s trigger of `onChange` when clearing the field value ([#2764](https://github.com/elastic/eui/pull/2764))
 
 ## [`18.2.0`](https://github.com/elastic/eui/tree/v18.2.0)
 

src-docs/src/views/form_controls/field_search.js

@@ -15,7 +15,7 @@ export default class extends Component {
 
   onChange = e => {
     this.setState({
-      value: e === '' ? '' : e.target.value,
+      value: e.target.value,
     });
   };
 

src/components/form/field_search/field_search.js

@@ -69,7 +69,19 @@ export class EuiFieldSearch extends Component {
   }
 
   onClear = () => {
-    this.props.onChange('');
+    // clear the field's value
+    this.inputElement.value = '';
+
+    // dispatch onChange event, with IE11 support/fallback
+    if ('createEvent' in document) {
+      const evt = document.createEvent('HTMLEvents');
+      evt.initEvent('change', true, false);
+      this.inputElement.dispatchEvent(evt);
+    } else {
+      this.inputElement.fireEvent('onchange');
+    }
+
+    // set focus on the search field
     this.inputElement.focus();
   };