@rc-component/select 1.2.6 → 1.2.7

package/es/BaseSelect/index.js

@@ -9,7 +9,7 @@ import useSelectTriggerControl, { isInside } from "../hooks/useSelectTriggerCont
 import SelectTrigger from "../SelectTrigger";
 import { getSeparatedContent, isValidCount } from "../utils/valueUtil";
 import Polite from "./Polite";
-import useOpen from "../hooks/useOpen";
+import useOpen, { macroTask } from "../hooks/useOpen";
 import { useEvent } from '@rc-component/util';
 import SelectInput from "../SelectInput";
 import useComponents from "../hooks/useComponents";
@@ -309,12 +309,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
   const onRootBlur = () => {
-    // Delay close should check the activeElement
-    if (mergedOpen) {
-      triggerOpen(false, {
-        cancelFun: () => isInside(getSelectElements(), document.activeElement)
-      });
-    }
+    macroTask(() => {
+      if (!isInside(getSelectElements(), document.activeElement)) {
+        triggerOpen(false);
+      }
+    });
   };
   const onInternalBlur = event => {
     setFocused(false);
@@ -336,7 +335,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onBlur?.(event);
     }
   };
-  const onRootMouseDown = (event, ...restArgs) => {
+  const onInternalMouseDown = (event, ...restArgs) => {
     const {
       target
     } = event;
@@ -345,7 +344,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     // We should give focus back to selector if clicked item is not focusable
     if (popupElement?.contains(target) && triggerOpen) {
       // Tell `open` not to close since it's safe in the popup
-      triggerOpen(true);
+      triggerOpen(true, {
+        ignoreNext: true
+      });
     }
     onMouseDown?.(event, ...restArgs);
   };
@@ -473,7 +474,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     tokenWithEnter: tokenWithEnter
     // Open
     ,
-    onMouseDown: onRootMouseDown
+    onMouseDown: onInternalMouseDown
     // Components
     ,
     components: mergedComponents
@@ -498,7 +499,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter,
-    onPopupMouseDown: onRootMouseDown,
+    onPopupMouseDown: onInternalMouseDown,
     onPopupBlur: onRootBlur
   }, renderNode);
   return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {

package/es/Select.d.ts

@@ -125,7 +125,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 DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & 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/SelectInput/index.js

@@ -105,13 +105,12 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
   // ====================== Open ======================
   const onInternalMouseDown = useEvent(event => {
     if (!disabled) {
-      const inputDOM = getDOM(inputRef.current);
-
       // https://github.com/ant-design/ant-design/issues/56002
       // Tell `useSelectTriggerControl` to ignore this event
       // When icon is dynamic render, the parentNode will miss
       // so we need to mark the event directly
-      event.nativeEvent._ori_target = inputDOM;
+      event.nativeEvent._ignore_global_close = true;
+      const inputDOM = getDOM(inputRef.current);
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
         event.preventDefault();
       }

package/es/hooks/useOpen.d.ts

@@ -1,10 +1,11 @@
 export declare const macroTask: (fn: VoidFunction, times?: number) => void;
 /**
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
- * `weak` means this call can be ignored if previous call exists.
+ * ignoreNext will skip next call in the macro task queue.
  */
 export type TriggerOpenType = (nextOpen?: boolean, config?: {
-    cancelFun?: () => boolean;
+    ignoreNext?: boolean;
+    lazy?: boolean;
 }) => void;
 /**
  * When `open` is controlled, follow the controlled value;

package/es/hooks/useOpen.js

@@ -17,7 +17,7 @@ export const macroTask = (fn, times = 1) => {
 
 /**
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
- * `weak` means this call can be ignored if previous call exists.
+ * ignoreNext will skip next call in the macro task queue.
  */
 
 /**
@@ -41,6 +41,7 @@ export default function useOpen(propOpen, onOpen, postOpen) {
   const ssrSafeOpen = rendered ? stateOpen : false;
   const mergedOpen = postOpen(ssrSafeOpen);
   const taskIdRef = useRef(0);
+  const taskLockRef = useRef(false);
   const triggerEvent = useEvent(nextOpen => {
     if (onOpen && mergedOpen !== nextOpen) {
       onOpen(nextOpen);
@@ -49,29 +50,32 @@ export default function useOpen(propOpen, onOpen, postOpen) {
   });
   const toggleOpen = useEvent((nextOpen, config = {}) => {
     const {
-      cancelFun
+      ignoreNext = false
     } = config;
     taskIdRef.current += 1;
     const id = taskIdRef.current;
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
-    function triggerUpdate() {
-      if (
-      // Always check if id is match
-      id === taskIdRef.current &&
-      // Check if need to cancel
-      !cancelFun?.()) {
-        triggerEvent(nextOpenVal);
-      }
-    }
 
-    // Weak update can be ignored
+    // Since `mergedOpen` is post-processed, we need to check if the value really changed
     if (nextOpenVal) {
-      triggerUpdate();
-    } else {
-      macroTask(() => {
-        triggerUpdate();
-      });
+      if (!taskLockRef.current) {
+        triggerEvent(nextOpenVal);
+
+        // Lock if needed
+        if (ignoreNext) {
+          taskLockRef.current = ignoreNext;
+          macroTask(() => {
+            taskLockRef.current = false;
+          }, 3);
+        }
+      }
+      return;
     }
+    macroTask(() => {
+      if (id === taskIdRef.current && !taskLockRef.current) {
+        triggerEvent(nextOpenVal);
+      }
+    });
   });
   return [mergedOpen, toggleOpen];
 }

package/es/hooks/useSelectTriggerControl.d.ts

@@ -1,3 +1,2 @@
-import type { TriggerOpenType } from './useOpen';
 export declare function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement): boolean;
-export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: TriggerOpenType, customizedTrigger: boolean): void;
+export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: (open: boolean) => void, customizedTrigger: boolean): void;

package/es/hooks/useSelectTriggerControl.js

@@ -13,12 +13,9 @@ export default function useSelectTriggerControl(elements, open, triggerOpen, cus
     if (target.shadowRoot && event.composed) {
       target = event.composedPath()[0] || target;
     }
-    if (event._ori_target) {
-      target = event._ori_target;
-    }
     if (open &&
     // Marked by SelectInput mouseDown event
-    !isInside(elements(), target)) {
+    !event._ignore_global_close && !isInside(elements(), target)) {
       // Should trigger close
       triggerOpen(false);
     }

package/lib/BaseSelect/index.js

@@ -14,7 +14,7 @@ var _useSelectTriggerControl = _interopRequireWildcard(require("../hooks/useSele
 var _SelectTrigger = _interopRequireDefault(require("../SelectTrigger"));
 var _valueUtil = require("../utils/valueUtil");
 var _Polite = _interopRequireDefault(require("./Polite"));
-var _useOpen = _interopRequireDefault(require("../hooks/useOpen"));
+var _useOpen = _interopRequireWildcard(require("../hooks/useOpen"));
 var _util = require("@rc-component/util");
 var _SelectInput = _interopRequireDefault(require("../SelectInput"));
 var _useComponents = _interopRequireDefault(require("../hooks/useComponents"));
@@ -318,12 +318,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
   const onRootBlur = () => {
-    // Delay close should check the activeElement
-    if (mergedOpen) {
-      triggerOpen(false, {
-        cancelFun: () => (0, _useSelectTriggerControl.isInside)(getSelectElements(), document.activeElement)
-      });
-    }
+    (0, _useOpen.macroTask)(() => {
+      if (!(0, _useSelectTriggerControl.isInside)(getSelectElements(), document.activeElement)) {
+        triggerOpen(false);
+      }
+    });
   };
   const onInternalBlur = event => {
     setFocused(false);
@@ -345,7 +344,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onBlur?.(event);
     }
   };
-  const onRootMouseDown = (event, ...restArgs) => {
+  const onInternalMouseDown = (event, ...restArgs) => {
     const {
       target
     } = event;
@@ -354,7 +353,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     // We should give focus back to selector if clicked item is not focusable
     if (popupElement?.contains(target) && triggerOpen) {
       // Tell `open` not to close since it's safe in the popup
-      triggerOpen(true);
+      triggerOpen(true, {
+        ignoreNext: true
+      });
     }
     onMouseDown?.(event, ...restArgs);
   };
@@ -482,7 +483,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     tokenWithEnter: tokenWithEnter
     // Open
     ,
-    onMouseDown: onRootMouseDown
+    onMouseDown: onInternalMouseDown
     // Components
     ,
     components: mergedComponents
@@ -507,7 +508,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter,
-    onPopupMouseDown: onRootMouseDown,
+    onPopupMouseDown: onInternalMouseDown,
     onPopupBlur: onRootBlur
   }, renderNode);
   return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {

package/lib/Select.d.ts

@@ -125,7 +125,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 DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & 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/SelectInput/index.js

@@ -114,13 +114,12 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
   // ====================== Open ======================
   const onInternalMouseDown = (0, _util.useEvent)(event => {
     if (!disabled) {
-      const inputDOM = (0, _findDOMNode.getDOM)(inputRef.current);
-
       // https://github.com/ant-design/ant-design/issues/56002
       // Tell `useSelectTriggerControl` to ignore this event
       // When icon is dynamic render, the parentNode will miss
       // so we need to mark the event directly
-      event.nativeEvent._ori_target = inputDOM;
+      event.nativeEvent._ignore_global_close = true;
+      const inputDOM = (0, _findDOMNode.getDOM)(inputRef.current);
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
         event.preventDefault();
       }

package/lib/hooks/useOpen.d.ts

@@ -1,10 +1,11 @@
 export declare const macroTask: (fn: VoidFunction, times?: number) => void;
 /**
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
- * `weak` means this call can be ignored if previous call exists.
+ * ignoreNext will skip next call in the macro task queue.
  */
 export type TriggerOpenType = (nextOpen?: boolean, config?: {
-    cancelFun?: () => boolean;
+    ignoreNext?: boolean;
+    lazy?: boolean;
 }) => void;
 /**
  * When `open` is controlled, follow the controlled value;

package/lib/hooks/useOpen.js

@@ -24,7 +24,7 @@ const macroTask = (fn, times = 1) => {
 
 /**
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
- * `weak` means this call can be ignored if previous call exists.
+ * ignoreNext will skip next call in the macro task queue.
  */
 exports.macroTask = macroTask;
 /**
@@ -48,6 +48,7 @@ function useOpen(propOpen, onOpen, postOpen) {
   const ssrSafeOpen = rendered ? stateOpen : false;
   const mergedOpen = postOpen(ssrSafeOpen);
   const taskIdRef = (0, _react.useRef)(0);
+  const taskLockRef = (0, _react.useRef)(false);
   const triggerEvent = (0, _util.useEvent)(nextOpen => {
     if (onOpen && mergedOpen !== nextOpen) {
       onOpen(nextOpen);
@@ -56,29 +57,32 @@ function useOpen(propOpen, onOpen, postOpen) {
   });
   const toggleOpen = (0, _util.useEvent)((nextOpen, config = {}) => {
     const {
-      cancelFun
+      ignoreNext = false
     } = config;
     taskIdRef.current += 1;
     const id = taskIdRef.current;
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
-    function triggerUpdate() {
-      if (
-      // Always check if id is match
-      id === taskIdRef.current &&
-      // Check if need to cancel
-      !cancelFun?.()) {
-        triggerEvent(nextOpenVal);
-      }
-    }
 
-    // Weak update can be ignored
+    // Since `mergedOpen` is post-processed, we need to check if the value really changed
     if (nextOpenVal) {
-      triggerUpdate();
-    } else {
-      macroTask(() => {
-        triggerUpdate();
-      });
+      if (!taskLockRef.current) {
+        triggerEvent(nextOpenVal);
+
+        // Lock if needed
+        if (ignoreNext) {
+          taskLockRef.current = ignoreNext;
+          macroTask(() => {
+            taskLockRef.current = false;
+          }, 3);
+        }
+      }
+      return;
     }
+    macroTask(() => {
+      if (id === taskIdRef.current && !taskLockRef.current) {
+        triggerEvent(nextOpenVal);
+      }
+    });
   });
   return [mergedOpen, toggleOpen];
 }

package/lib/hooks/useSelectTriggerControl.d.ts

@@ -1,3 +1,2 @@
-import type { TriggerOpenType } from './useOpen';
 export declare function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement): boolean;
-export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: TriggerOpenType, customizedTrigger: boolean): void;
+export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: (open: boolean) => void, customizedTrigger: boolean): void;

package/lib/hooks/useSelectTriggerControl.js

@@ -22,12 +22,9 @@ function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger)
     if (target.shadowRoot && event.composed) {
       target = event.composedPath()[0] || target;
     }
-    if (event._ori_target) {
-      target = event._ori_target;
-    }
     if (open &&
     // Marked by SelectInput mouseDown event
-    !isInside(elements(), target)) {
+    !event._ignore_global_close && !isInside(elements(), target)) {
       // Should trigger close
       triggerOpen(false);
     }

package/package.json

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