feat: support onActive

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;

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 =========================

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