Trigger onInputChange when clicking the clear button (#594)

Author: ericgio

example/src/examples/BasicExample.js

@@ -16,9 +16,11 @@ const BasicExample = () => {
       <Form.Group>
         <Form.Label>Single Selection</Form.Label>
         <Typeahead
+          clearButton
           id="basic-typeahead-single"
           labelKey="name"
           onChange={setSingleSelections}
+          onInputChange={console.log}
           options={options}
           placeholder="Choose a state..."
           selected={singleSelections}

src/__tests__/components/Typeahead.test.js

@@ -1263,21 +1263,29 @@ describe('<Typeahead> `change` events', () => {
     }
   );
 
-  it('calls `onChange` when clicking the clear button', () => {
-    const selected = states.slice(0, 1);
+  it('calls change events when clicking the clear button', () => {
+    let event, value;
+
+    onInputChange = jest.fn((v, e) => {
+      value = v;
+      event = e;
+    });
+
     render(
       <TestComponent
         clearButton
         onChange={onChange}
         onInputChange={onInputChange}
-        selected={selected}
+        selected={states.slice(0, 1)}
       />
     );
 
     screen.getByRole('button').click();
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onInputChange).toHaveBeenCalledTimes(0);
+    expect(onInputChange).toHaveBeenCalledTimes(1);
+    expect(value).toBe('');
+    expect(event).toBeDefined();
   });
 
   it('calls `onInputChange` when text is entered in the input', () => {

src/core/Typeahead.js

@@ -290,6 +290,21 @@ export function toggleMenu(state: TypeaheadState, props: Props) {
   return state.showMenu ? hideMenu(state, props) : { showMenu: true };
 }
 
+/**
+ * Manually trigger the input's change event.
+ * https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js/46012210#46012210
+ */
+function triggerInputChange(input: HTMLInputElement, value: string) {
+  const inputValue = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    'value'
+  );
+
+  inputValue && inputValue.set && inputValue.set.call(input, value);
+  const e = new Event('input', { bubbles: true });
+  input.dispatchEvent(e);
+}
+
 class Typeahead extends React.Component<Props, TypeaheadState> {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
@@ -453,7 +468,8 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
   }
 
   _handleClear = () => {
-    this.setState(clearTypeahead, () => this._handleChange([]));
+    this.inputNode && triggerInputChange(this.inputNode, '');
+    this.setState(clearTypeahead);
   }
 
   _handleFocus = (e: SyntheticEvent<HTMLInputElement>) => {