Merge remote-tracking branch 'origin/fix/onBlur-onSearch-once' into fix/onBlur-onSearch-once

Author: su-muzhi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "14.16.3",
+  "version": "14.16.4",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"

src/OptionList.tsx

@@ -85,6 +85,17 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     listRef.current?.scrollTo(typeof args === 'number' ? { index: args } : args);
   };
 
+  // https://github.com/ant-design/ant-design/issues/34975
+  const isSelected = React.useCallback(
+    (value: RawValueType) => {
+      if (mode === 'combobox') {
+        return false;
+      }
+      return rawValues.has(value);
+    },
+    [mode, [...rawValues].toString(), rawValues.size],
+  );
+
   // ========================== Active ==========================
   const getEnabledActiveIndex = (index: number, offset: number = 1): number => {
     const len = memoFlattenOptions.length;
@@ -94,7 +105,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
 
       const { group, data } = memoFlattenOptions[current] || {};
 
-      if (!group && !data?.disabled && !overMaxCount) {
+      if (!group && !data?.disabled && (isSelected(data.value) || !overMaxCount)) {
         return current;
       }
     }
@@ -122,17 +133,6 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
   }, [memoFlattenOptions.length, searchValue]);
 
-  // https://github.com/ant-design/ant-design/issues/34975
-  const isSelected = React.useCallback(
-    (value: RawValueType) => {
-      if (mode === 'combobox') {
-        return false;
-      }
-      return rawValues.has(value);
-    },
-    [mode, [...rawValues].toString(), rawValues.size],
-  );
-
   // https://github.com/ant-design/ant-design/issues/48036
   const isAriaSelected = React.useCallback(
     (value: RawValueType) => {

src/Select.tsx

@@ -161,7 +161,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   value?: ValueType | null;
   defaultValue?: ValueType | null;
   maxCount?: number;
-  onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
+  onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
 }
 
 function isRawValue(value: DraftValueType): value is RawValueType {

src/utils/keyUtil.ts

@@ -2,33 +2,39 @@ import KeyCode from 'rc-util/lib/KeyCode';
 
 /** keyCode Judgment function */
 export function isValidateOpenKey(currentKeyCode: number): boolean {
-  return ![
-    // System function button
-    KeyCode.ESC,
-    KeyCode.SHIFT,
-    KeyCode.BACKSPACE,
-    KeyCode.TAB,
-    KeyCode.WIN_KEY,
-    KeyCode.ALT,
-    KeyCode.META,
-    KeyCode.WIN_KEY_RIGHT,
-    KeyCode.CTRL,
-    KeyCode.SEMICOLON,
-    KeyCode.EQUALS,
-    KeyCode.CAPS_LOCK,
-    KeyCode.CONTEXT_MENU,
-    // F1-F12
-    KeyCode.F1,
-    KeyCode.F2,
-    KeyCode.F3,
-    KeyCode.F4,
-    KeyCode.F5,
-    KeyCode.F6,
-    KeyCode.F7,
-    KeyCode.F8,
-    KeyCode.F9,
-    KeyCode.F10,
-    KeyCode.F11,
-    KeyCode.F12,
-  ].includes(currentKeyCode);
+  return (
+    // Undefined for Edge bug:
+    // https://github.com/ant-design/ant-design/issues/51292
+    currentKeyCode &&
+    // Other keys
+    ![
+      // System function button
+      KeyCode.ESC,
+      KeyCode.SHIFT,
+      KeyCode.BACKSPACE,
+      KeyCode.TAB,
+      KeyCode.WIN_KEY,
+      KeyCode.ALT,
+      KeyCode.META,
+      KeyCode.WIN_KEY_RIGHT,
+      KeyCode.CTRL,
+      KeyCode.SEMICOLON,
+      KeyCode.EQUALS,
+      KeyCode.CAPS_LOCK,
+      KeyCode.CONTEXT_MENU,
+      // F1-F12
+      KeyCode.F1,
+      KeyCode.F2,
+      KeyCode.F3,
+      KeyCode.F4,
+      KeyCode.F5,
+      KeyCode.F6,
+      KeyCode.F7,
+      KeyCode.F8,
+      KeyCode.F9,
+      KeyCode.F10,
+      KeyCode.F11,
+      KeyCode.F12,
+    ].includes(currentKeyCode)
+  );
 }

tests/Accessibility.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import Select from '../src';
 import { injectRunAllTimers, expectOpen, keyDown } from './utils/common';
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 
 describe('Select.Accessibility', () => {
   injectRunAllTimers(jest);
@@ -67,4 +67,39 @@ describe('Select.Accessibility', () => {
         .textContent,
     ).toEqual('Light');
   });
+
+  // https://github.com/ant-design/ant-design/issues/51292
+  it('edge bug', () => {
+    const { container } = render(
+      <Select
+        mode="combobox"
+        options={[
+          {
+            value: '123',
+          },
+          {
+            value: '1234',
+          },
+          {
+            value: '12345',
+          },
+        ]}
+        defaultValue="123"
+      />,
+    );
+
+    // Invalid key
+    keyDown(container.querySelector('input')!, undefined);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expectOpen(container, false);
+
+    // Valid key
+    keyDown(container.querySelector('input')!, KeyCode.A);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expectOpen(container);
+  });
 });

tests/OptionList.test.tsx

@@ -393,4 +393,70 @@ describe('OptionList', () => {
     });
     expect(global.scrollToArgs).toEqual({ index: 1 });
   });
+
+  // Test keyboard navigation behavior when maxCount limit is reached
+  // Verifies that:
+  // 1. Can navigate between already selected options
+  // 2. Cannot navigate to unselected options when maxCount is reached
+  // 3. Navigation wraps around between selected options
+  it('should allow keyboard navigation on selected options when reach maxCount', () => {
+    const onActiveValue = jest.fn();
+    const listRef = React.createRef<RefOptionListProps>();
+
+    render(
+      generateList({
+        multiple: true,
+        maxCount: 2,
+        options: [
+          { value: '1', label: '1' },
+          { value: '2', label: '2' },
+          { value: '3', label: '3' },
+        ],
+        values: new Set(['1', '2']), // Pre-select first two options
+        onActiveValue,
+        ref: listRef,
+      }),
+    );
+
+    onActiveValue.mockReset();
+
+    // Press down key - should move to option '2'
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.DOWN } as any);
+    });
+    expect(onActiveValue).toHaveBeenCalledWith(
+      '2',
+      expect.anything(),
+      expect.objectContaining({ source: 'keyboard' }),
+    );
+
+    // Press down key again - should wrap to option '1'
+    onActiveValue.mockReset();
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.DOWN } as any);
+    });
+    expect(onActiveValue).toHaveBeenCalledWith(
+      '1',
+      expect.anything(),
+      expect.objectContaining({ source: 'keyboard' }),
+    );
+
+    // Press up key - should move back to option '2'
+    onActiveValue.mockReset();
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.UP } as any);
+    });
+    expect(onActiveValue).toHaveBeenCalledWith(
+      '2',
+      expect.anything(),
+      expect.objectContaining({ source: 'keyboard' }),
+    );
+
+    // Press down key - should not activate option '3' since maxCount is reached
+    onActiveValue.mockReset();
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.DOWN } as any);
+    });
+    expect(onActiveValue).not.toHaveBeenCalledWith('3', expect.anything(), expect.anything());
+  });
 });

tests/utils/common.ts

@@ -101,6 +101,9 @@ export function injectRunAllTimers(jest: Jest) {
 
 export function keyDown(element: HTMLElement, keyCode: number) {
   const event = createEvent.keyDown(element, { keyCode });
+  Object.defineProperties(event, {
+    which: { get: () => keyCode },
+  });
 
   act(() => {
     fireEvent(element, event);