From 529377d929a77c067a9b0758a33d7d9d7c98fb59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 27 May 2025 01:07:00 +0800
Subject: [PATCH 1/4] feat: support onActive

---
 docs/examples/combobox.tsx   | 5 +++++
 src/Select.tsx               | 6 +++++-
 tests/Accessibility.test.tsx | 8 ++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/examples/combobox.tsx b/docs/examples/combobox.tsx
index 826ede46..6e987be6 100644
--- a/docs/examples/combobox.tsx
+++ b/docs/examples/combobox.tsx
@@ -18,6 +18,10 @@ class Combobox extends React.Component {
     console.log('Ref:', this.textareaRef);
   }
 
+  onActive = (value) => {
+    console.log('onActive', value);
+  };
+
   onChange = (value, option) => {
     console.log('onChange', value, option);
     this.setState({
@@ -83,6 +87,7 @@ class Combobox extends React.Component {
           value={value}
           mode="combobox"
           onChange={this.onChange}
+          onActive={this.onActive}
           filterOption={(inputValue, option) => {
             if (!inputValue) {
               return true;
diff --git a/src/Select.tsx b/src/Select.tsx
index f278d6c3..a035278e 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -127,6 +127,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   // >>> Select
   onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
   onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+  onActive?: (value: ValueType) => void;
 
   // >>> Options
   /**
@@ -185,6 +186,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       // Select
       onSelect,
       onDeselect,
+      onActive,
       popupMatchSelectWidth = true,
 
       // Options
@@ -500,8 +502,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
           setActiveValue(String(active));
         }
+
+        onActive?.(active);
       },
-      [backfill, mode],
+      [backfill, mode, onActive],
     );
 
     // ========================= OptionList =========================
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
index 0c42a047..bae127ee 100644
--- a/tests/Accessibility.test.tsx
+++ b/tests/Accessibility.test.tsx
@@ -23,6 +23,8 @@ describe('Select.Accessibility', () => {
 
   // https://github.com/ant-design/ant-design/issues/31850
   it('active index should keep', () => {
+    const onActive = jest.fn();
+
     const { container } = render(
       <Select
         showSearch
@@ -40,6 +42,7 @@ describe('Select.Accessibility', () => {
             value: 'light',
           },
         ]}
+        onActive={onActive}
       />,
     );
 
@@ -52,13 +55,18 @@ describe('Select.Accessibility', () => {
       document.querySelector('.rc-select-item-option-active .rc-select-item-option-content')
         .textContent,
     ).toEqual('Bamboo');
+    expect(onActive).toHaveBeenCalledWith('bamboo');
 
     keyDown(container.querySelector('input')!, KeyCode.ENTER);
     expectOpen(container, false);
 
     // Next Match
     fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
+    expect(onActive).toHaveBeenCalledWith('bamboo');
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'not exist' } });
+    expect(onActive).toHaveBeenCalledWith(null);
     fireEvent.change(container.querySelector('input')!, { target: { value: 'g' } });
+    expect(onActive).toHaveBeenCalledWith('light');
     jest.runAllTimers();
 
     expectOpen(container);

From 20609886b89a635d2a415a9c2af50a9a88a75c9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 27 May 2025 11:10:43 +0800
Subject: [PATCH 2/4] chore: enhance logic

---
 docs/examples/controlled.tsx |  5 +++++
 src/OptionList.tsx           | 26 ++++++++++++++------------
 src/Select.tsx               | 11 ++++++++++-
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx
index 34bd7a75..907e6ff5 100644
--- a/docs/examples/controlled.tsx
+++ b/docs/examples/controlled.tsx
@@ -47,6 +47,10 @@ class Controlled extends React.Component<{}, ControlledState> {
     this.setState({ open });
   };
 
+  onActive = (value) => {
+    console.error('onActive', value);
+  };
+
   render() {
     const { open, destroy, value } = this.state;
     if (destroy) {
@@ -69,6 +73,7 @@ class Controlled extends React.Component<{}, ControlledState> {
             optionFilterProp="text"
             onChange={this.onChange}
             onPopupVisibleChange={this.onPopupVisibleChange}
+            onActive={this.onActive}
           >
             <Option value="01" text="jack" title="jack">
               <b
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index fdcf12ff..cd838776 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -154,20 +154,22 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
      * `setActive` function will call root accessibility state update which makes re-render.
      * So we need to delay to let Input component trigger onChange first.
      */
-    const timeoutId = setTimeout(() => {
-      if (!multiple && open && rawValues.size === 1) {
-        const value: RawValueType = Array.from(rawValues)[0];
-        // Scroll to the option closest to the searchValue if searching.
-        const index = memoFlattenOptions.findIndex(({ data }) =>
-          searchValue ? String(data.value).startsWith(searchValue) : data.value === value,
-        );
-
-        if (index !== -1) {
-          setActive(index);
+    let timeoutId: NodeJS.Timeout;
+
+    if (!multiple && open && rawValues.size === 1) {
+      const value: RawValueType = Array.from(rawValues)[0];
+      // Scroll to the option closest to the searchValue if searching.
+      const index = memoFlattenOptions.findIndex(({ data }) =>
+        searchValue ? String(data.value).startsWith(searchValue) : data.value === value,
+      );
+
+      if (index !== -1) {
+        setActive(index);
+        timeoutId = setTimeout(() => {
           scrollIntoView(index);
-        }
+        });
       }
-    });
+    }
 
     // Force trigger scrollbar visible when open
     if (open) {
diff --git a/src/Select.tsx b/src/Select.tsx
index a035278e..2d337a67 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -495,6 +495,8 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
     const mergedDefaultActiveFirstOption =
       defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
 
+    const activeEventRef = React.useRef<Promise<void>>();
+
     const onActiveValue: OnActiveValue = React.useCallback(
       (active, index, { source = 'keyboard' } = {}) => {
         setAccessibilityIndex(index);
@@ -503,7 +505,14 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
           setActiveValue(String(active));
         }
 
-        onActive?.(active);
+        // Active will call multiple times.
+        // We only need trigger the last one.
+        const promise = Promise.resolve().then(() => {
+          if (activeEventRef.current === promise) {
+            onActive?.(active);
+          }
+        });
+        activeEventRef.current = promise;
       },
       [backfill, mode, onActive],
     );

From 89ddfafd7c92257972c4f8d6f250a36fb8d107db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 27 May 2025 11:14:11 +0800
Subject: [PATCH 3/4] test: update test case

---
 tests/Accessibility.test.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
index bae127ee..e5d6a295 100644
--- a/tests/Accessibility.test.tsx
+++ b/tests/Accessibility.test.tsx
@@ -22,7 +22,7 @@ describe('Select.Accessibility', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/31850
-  it('active index should keep', () => {
+  it('active index should keep', async () => {
     const onActive = jest.fn();
 
     const { container } = render(
@@ -48,7 +48,10 @@ describe('Select.Accessibility', () => {
 
     // First Match
     fireEvent.change(container.querySelector('input')!, { target: { value: 'b' } });
-    jest.runAllTimers();
+    await act(async () => {
+      jest.runAllTimers();
+      await Promise.resolve();
+    });
 
     expectOpen(container);
     expect(
@@ -62,12 +65,27 @@ describe('Select.Accessibility', () => {
 
     // Next Match
     fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
+    await act(async () => {
+      await Promise.resolve();
+    });
     expect(onActive).toHaveBeenCalledWith('bamboo');
+
     fireEvent.change(container.querySelector('input')!, { target: { value: 'not exist' } });
+    await act(async () => {
+      await Promise.resolve();
+    });
     expect(onActive).toHaveBeenCalledWith(null);
+
     fireEvent.change(container.querySelector('input')!, { target: { value: 'g' } });
+    await act(async () => {
+      await Promise.resolve();
+    });
     expect(onActive).toHaveBeenCalledWith('light');
-    jest.runAllTimers();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await Promise.resolve();
+    });
 
     expectOpen(container);
     expect(

From 80d0da474ecdedf5492a37c7adabc11d3d1c08f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 27 May 2025 15:38:46 +0800
Subject: [PATCH 4/4] test: update test case

---
 tests/Accessibility.test.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
index e5d6a295..7b2c83bf 100644
--- a/tests/Accessibility.test.tsx
+++ b/tests/Accessibility.test.tsx
@@ -59,6 +59,7 @@ describe('Select.Accessibility', () => {
         .textContent,
     ).toEqual('Bamboo');
     expect(onActive).toHaveBeenCalledWith('bamboo');
+    expect(onActive).toHaveBeenCalledTimes(1);
 
     keyDown(container.querySelector('input')!, KeyCode.ENTER);
     expectOpen(container, false);
@@ -69,18 +70,21 @@ describe('Select.Accessibility', () => {
       await Promise.resolve();
     });
     expect(onActive).toHaveBeenCalledWith('bamboo');
+    expect(onActive).toHaveBeenCalledTimes(2);
 
     fireEvent.change(container.querySelector('input')!, { target: { value: 'not exist' } });
     await act(async () => {
       await Promise.resolve();
     });
     expect(onActive).toHaveBeenCalledWith(null);
+    expect(onActive).toHaveBeenCalledTimes(3);
 
     fireEvent.change(container.querySelector('input')!, { target: { value: 'g' } });
     await act(async () => {
       await Promise.resolve();
     });
     expect(onActive).toHaveBeenCalledWith('light');
+    expect(onActive).toHaveBeenCalledTimes(4);
 
     await act(async () => {
       jest.runAllTimers();