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.
carbon-design-system · Jan 13, 2020 · 12217d1 · 12217d1
1 parent 136e2f9
commit 12217d1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git 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
@@ -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}