feat: support onActive (#1154)

* feat: support onActive

* chore: enhance logic

* test: update test case

* test: update test case

Author: zombieJ

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;

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

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) {

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
@@ -493,15 +495,26 @@ 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);
 
         if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
           setActiveValue(String(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],
+      [backfill, mode, onActive],
     );
 
     // ========================= OptionList =========================

tests/Accessibility.test.tsx

@@ -22,7 +22,9 @@ 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(
       <Select
         showSearch
@@ -40,26 +42,54 @@ describe('Select.Accessibility', () => {
             value: 'light',
           },
         ]}
+        onActive={onActive}
       />,
     );
 
     // First Match
     fireEvent.change(container.querySelector('input')!, { target: { value: 'b' } });
-    jest.runAllTimers();
+    await act(async () => {
+      jest.runAllTimers();
+      await Promise.resolve();
+    });
 
     expectOpen(container);
     expect(
       document.querySelector('.rc-select-item-option-active .rc-select-item-option-content')
         .textContent,
     ).toEqual('Bamboo');
+    expect(onActive).toHaveBeenCalledWith('bamboo');
+    expect(onActive).toHaveBeenCalledTimes(1);
 
     keyDown(container.querySelector('input')!, KeyCode.ENTER);
     expectOpen(container, false);
 
     // Next Match
     fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
+    await act(async () => {
+      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' } });
-    jest.runAllTimers();
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(onActive).toHaveBeenCalledWith('light');
+    expect(onActive).toHaveBeenCalledTimes(4);
+
+    await act(async () => {
+      jest.runAllTimers();
+      await Promise.resolve();
+    });
 
     expectOpen(container);
     expect(