From f788410fa7b6a5df7dcb152bb7b8a74bc3a96870 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 8 Jan 2020 09:02:29 +0900
Subject: [PATCH] fix(ComboBox): bring IME support back (#4952)

This change backs out #3646 partially given moving `inputValue` state
syncing code from `handleOnInputValueChange` to `handleOnStateChange`
causes in-composition string (of IME) getting lost, because the
different rendering sequence yielded by such change causes Downshift to
(temporarily) render an older (stale) value to the `<input>`.

Fixes #4947.
---
 .../src/components/ComboBox/ComboBox-test.js  |  8 ++---
 .../react/src/components/ComboBox/ComboBox.js | 31 ++++++++++---------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index 55b96c35400d..84d263ca114d 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -203,14 +203,10 @@ describe('ComboBox', () => {
     it('should set `inputValue` to an empty string if a falsey-y value is given', () => {
       const wrapper = mount(<ComboBox {...mockProps} />);
 
-      wrapper
-        .instance()
-        .handleOnStateChange({ inputValue: 'foo' }, downshiftActions);
+      wrapper.instance().handleOnInputValueChange('foo', downshiftActions);
       expect(wrapper.state('inputValue')).toBe('foo');
 
-      wrapper
-        .instance()
-        .handleOnStateChange({ inputValue: null }, downshiftActions);
+      wrapper.instance().handleOnInputValueChange(null, downshiftActions);
       expect(wrapper.state('inputValue')).toBe('');
     });
   });
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 5bd432308b78..b9a273de236e 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -220,24 +220,26 @@ export default class ComboBox extends React.Component {
     }
   };
 
+  handleOnInputValueChange = inputValue => {
+    const { onInputChange } = this.props;
+
+    this.setState(
+      () => ({
+        // Default to empty string if we have a false-y `inputValue`
+        inputValue: inputValue || '',
+      }),
+      () => {
+        if (onInputChange) {
+          onInputChange(inputValue);
+        }
+      }
+    );
+  };
+
   handleOnStateChange = (newState, { setHighlightedIndex }) => {
     if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
       const { inputValue } = newState;
-      const { onInputChange } = this.props;
-
       setHighlightedIndex(findHighlightedIndex(this.props, inputValue));
-
-      this.setState(
-        () => ({
-          // Default to empty string if we have a false-y `inputValue`
-          inputValue: inputValue || '',
-        }),
-        () => {
-          if (onInputChange) {
-            onInputChange(inputValue);
-          }
-        }
-      );
     }
   };
 
@@ -301,6 +303,7 @@ export default class ComboBox extends React.Component {
       <Downshift
         {...downshiftProps}
         onChange={this.handleOnChange}
+        onInputValueChange={this.handleOnInputValueChange}
         onStateChange={this.handleOnStateChange}
         inputValue={this.state.inputValue || ''}
         itemToString={itemToString}