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

…ent (#2764)

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

* changelog

* Actually trigger the browser's change event handling

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,37 @@ export class EuiFieldSearch extends Component {
   }
 
   onClear = () => {
-    this.props.onChange('');
+    // clear the field's value
+
+    // 1. React doesn't listen for `change` events, instead it maps `input` events to `change`
+    // 2. React only fires the mapped `change` event if the element's value has changed
+    // 3. An input's value is, in addition to other methods, tracked by intercepting element.value = '...'
+    //
+    // So we have to go below the element's value setter to avoid React intercepting it,
+    // only then will React treat the value as different and fire its `change` event
+    //
+    // https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value'
+    ).set;
+    nativeInputValueSetter.call(this.inputElement, '');
+
+    // dispatch input event, with IE11 support/fallback
+    if ('Event' in window && typeof Event === 'function') {
+      const event = new Event('input', {
+        bubbles: true,
+        cancelable: false,
+      });
+      this.inputElement.dispatchEvent(event);
+    } else {
+      // IE11
+      const event = document.createEvent('Event');
+      event.initEvent('input', true, false);
+      this.inputElement.dispatchEvent(event);
+    }
+
+    // set focus on the search field
     this.inputElement.focus();
   };