fix: avoid selecting active option when Enter confirms IME composition

src/BaseSelect/index.tsx

@@ -490,6 +490,10 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
 
     const isEnterKey = key === 'Enter';
 
+    // The Enter key that confirms an IME composition should not select the active
+    // option, the same way the Selector skips the tags-mode submit while composing.
+    const isComposingEnter = isEnterKey && event.nativeEvent.isComposing;
+
     if (isEnterKey) {
       // Do not submit form when type in the input
       if (mode !== 'combobox') {
@@ -533,7 +537,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       }
     }
 
-    if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
+    if (mergedOpen && (!isEnterKey || !keyLockRef.current) && !isComposingEnter) {
       // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
       if (isEnterKey) {
         keyLockRef.current = true;

tests/Composition.test.tsx

@@ -0,0 +1,50 @@
+import { createEvent, fireEvent, render } from '@testing-library/react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import { act } from 'react';
+import Select, { Option } from '../src';
+import { keyDown } from './utils/common';
+
+// The keydown that confirms an IME composition still reports `which === ENTER`
+// on some browsers (e.g. Safari) while `isComposing` is true.
+function imeEnterKeyDown(element: HTMLElement) {
+  const event = createEvent.keyDown(element, { keyCode: KeyCode.ENTER });
+  Object.defineProperties(event, {
+    which: { get: () => KeyCode.ENTER },
+    isComposing: { get: () => true },
+  });
+  act(() => {
+    fireEvent(element, event);
+  });
+}
+
+describe('Select.Composition', () => {
+  it('does not select the active option when Enter only confirms the IME composition', () => {
+    const onChange = jest.fn();
+    const onSelect = jest.fn();
+    const { container } = render(
+      <Select showSearch open onChange={onChange} onSelect={onSelect}>
+        <Option value="1">One</Option>
+        <Option value="2">Two</Option>
+      </Select>,
+    );
+
+    imeEnterKeyDown(container.querySelector('input'));
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('still selects the active option on a normal Enter', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Select showSearch open onChange={onChange}>
+        <Option value="1">One</Option>
+        <Option value="2">Two</Option>
+      </Select>,
+    );
+
+    keyDown(container.querySelector('input'), KeyCode.ENTER);
+
+    expect(onChange).toHaveBeenCalledWith('1', expect.anything());
+  });
+});