Merge pull request #3442 from sat0yu/ignore-enter-key-in-IME

Ignore keydown events on `Enter` in IME
JedWatson · Apr 16, 2019 · b8298f4 · b8298f4
2 parents d92bfc4 + a919a3c
commit b8298f4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/Select.js b/src/Select.js
@@ -1198,6 +1198,11 @@ export default class Select extends Component<Props, State> {
         this.selectOption(focusedOption);
         break;
       case 'Enter':
+        if (event.keyCode === 229) {
+          // ignore the keydown event from an Input Method Editor(IME)
+          // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
+          break;
+        }
         if (menuIsOpen) {
           if (!focusedOption) return;
           if (isComposing) return;

diff --git a/src/__tests__/Select.test.js b/src/__tests__/Select.test.js
@@ -1341,6 +1341,28 @@ cases(
   }
 );
 
+test('hitting Enter on option should not call onChange if the event comes from IME', () => {
+  let spy = jest.fn();
+  let selectWrapper = mount(
+    <Select
+      className="react-select"
+      classNamePrefix="react-select"
+      menuIsOpen
+      onChange={spy}
+      onInputChange={jest.fn()}
+      onMenuClose={jest.fn()}
+      options={OPTIONS}
+      tabSelectsValue={false}
+    />
+  );
+
+  let selectOption = selectWrapper.find('div.react-select__option').at(0);
+  selectWrapper.setState({ focusedOption: { label: '2', value: 'two' } });
+
+  selectOption.simulate('keyDown', { keyCode: 229, key: 'Enter' });
+  expect(spy).not.toHaveBeenCalled();
+});
+
 test('hitting tab on option should not call onChange if tabSelectsValue is false', () => {
   let spy = jest.fn();
   let selectWrapper = mount(