@rc-component/select 1.0.4 → 1.0.5

package/es/OptionList.js

@@ -127,19 +127,20 @@ const OptionList = (_, ref) => {
      * `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 = 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;
+    if (!multiple && open && rawValues.size === 1) {
+      const value = 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) {

package/es/Select.d.ts

@@ -77,6 +77,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     autoClearSearchValue?: boolean;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onActive?: (value: ValueType) => void;
     /**
      * In Select, `false` means do nothing.
      * In TreeSelect, `false` will highlight match item.
@@ -109,9 +110,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/es/Select.js

@@ -64,6 +64,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Select
     onSelect,
     onDeselect,
+    onActive,
     popupMatchSelectWidth = true,
     // Options
     filterOption,
@@ -305,6 +306,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [activeValue, setActiveValue] = React.useState(null);
   const [accessibilityIndex, setAccessibilityIndex] = React.useState(0);
   const mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
+  const activeEventRef = React.useRef();
   const onActiveValue = React.useCallback((active, index, {
     source = 'keyboard'
   } = {}) => {
@@ -312,7 +314,16 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
       setActiveValue(String(active));
     }
-  }, [backfill, mode]);
+
+    // 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]);
 
   // ========================= OptionList =========================
   const triggerSelect = (val, selected, type) => {

package/lib/OptionList.js

@@ -135,19 +135,20 @@ const OptionList = (_, ref) => {
      * `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 = 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;
+    if (!multiple && open && rawValues.size === 1) {
+      const value = 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) {

package/lib/Select.d.ts

@@ -77,6 +77,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     autoClearSearchValue?: boolean;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onActive?: (value: ValueType) => void;
     /**
      * In Select, `false` means do nothing.
      * In TreeSelect, `false` will highlight match item.
@@ -109,9 +110,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/lib/Select.js

@@ -71,6 +71,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Select
     onSelect,
     onDeselect,
+    onActive,
     popupMatchSelectWidth = true,
     // Options
     filterOption,
@@ -312,6 +313,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [activeValue, setActiveValue] = React.useState(null);
   const [accessibilityIndex, setAccessibilityIndex] = React.useState(0);
   const mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
+  const activeEventRef = React.useRef();
   const onActiveValue = React.useCallback((active, index, {
     source = 'keyboard'
   } = {}) => {
@@ -319,7 +321,16 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
       setActiveValue(String(active));
     }
-  }, [backfill, mode]);
+
+    // 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]);
 
   // ========================= OptionList =========================
   const triggerSelect = (val, selected, type) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"