chore: enhance logic

Author: zombieJ

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

@@ -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],
     );