@rc-component/select 1.3.2 → 1.3.4

package/es/BaseSelect/index.js

@@ -295,9 +295,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   useSelectTriggerControl(getSelectElements, mergedOpen, triggerOpen, !!mergedComponents.root);
 
   // ========================== Focus / Blur ==========================
-  /** Record real focus status */
-  // const focusRef = React.useRef<boolean>(false);
-
+  const internalMouseDownRef = React.useRef(false);
   const onInternalFocus = event => {
     setFocused(true);
     if (!disabled) {
@@ -309,11 +307,12 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
   const onRootBlur = () => {
-    macroTask(() => {
-      if (!isInside(getSelectElements(), document.activeElement)) {
-        triggerOpen(false);
-      }
-    });
+    // Delay close should check the activeElement
+    if (mergedOpen && !internalMouseDownRef.current) {
+      triggerOpen(false, {
+        cancelFun: () => isInside(getSelectElements(), document.activeElement)
+      });
+    }
   };
   const onInternalBlur = event => {
     setFocused(false);
@@ -335,7 +334,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onBlur?.(event);
     }
   };
-  const onInternalMouseDown = (event, ...restArgs) => {
+  const onRootMouseDown = (event, ...restArgs) => {
     const {
       target
     } = event;
@@ -344,11 +343,13 @@ 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, {
-        ignoreNext: true
-      });
+      triggerOpen(true);
     }
     onMouseDown?.(event, ...restArgs);
+    internalMouseDownRef.current = true;
+    macroTask(() => {
+      internalMouseDownRef.current = false;
+    });
   };
 
   // ============================ Dropdown ============================
@@ -474,7 +475,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     tokenWithEnter: tokenWithEnter
     // Open
     ,
-    onMouseDown: onInternalMouseDown
+    onMouseDown: onRootMouseDown
     // Components
     ,
     components: mergedComponents
@@ -499,7 +500,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter,
-    onPopupMouseDown: onInternalMouseDown,
+    onPopupMouseDown: onRootMouseDown,
     onPopupBlur: onRootBlur
   }, renderNode);
   return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {

package/es/SelectInput/index.js

@@ -105,12 +105,13 @@ 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._ignore_global_close = true;
-      const inputDOM = getDOM(inputRef.current);
+      event.nativeEvent._ori_target = inputDOM;
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
         event.preventDefault();
       }

package/es/hooks/useOpen.d.ts

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

package/es/hooks/useSelectTriggerControl.d.ts

@@ -1,2 +1,3 @@
+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: (open: boolean) => void, customizedTrigger: boolean): void;
+export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: TriggerOpenType, customizedTrigger: boolean): void;

package/es/hooks/useSelectTriggerControl.js

@@ -13,9 +13,12 @@ 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
-    !event._ignore_global_close && !isInside(elements(), target)) {
+    !isInside(elements(), target)) {
       // Should trigger close
       triggerOpen(false);
     }

package/lib/BaseSelect/index.js

@@ -304,9 +304,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   (0, _useSelectTriggerControl.default)(getSelectElements, mergedOpen, triggerOpen, !!mergedComponents.root);
 
   // ========================== Focus / Blur ==========================
-  /** Record real focus status */
-  // const focusRef = React.useRef<boolean>(false);
-
+  const internalMouseDownRef = React.useRef(false);
   const onInternalFocus = event => {
     setFocused(true);
     if (!disabled) {
@@ -318,11 +316,12 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
   const onRootBlur = () => {
-    (0, _useOpen.macroTask)(() => {
-      if (!(0, _useSelectTriggerControl.isInside)(getSelectElements(), document.activeElement)) {
-        triggerOpen(false);
-      }
-    });
+    // Delay close should check the activeElement
+    if (mergedOpen && !internalMouseDownRef.current) {
+      triggerOpen(false, {
+        cancelFun: () => (0, _useSelectTriggerControl.isInside)(getSelectElements(), document.activeElement)
+      });
+    }
   };
   const onInternalBlur = event => {
     setFocused(false);
@@ -344,7 +343,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onBlur?.(event);
     }
   };
-  const onInternalMouseDown = (event, ...restArgs) => {
+  const onRootMouseDown = (event, ...restArgs) => {
     const {
       target
     } = event;
@@ -353,11 +352,13 @@ 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, {
-        ignoreNext: true
-      });
+      triggerOpen(true);
     }
     onMouseDown?.(event, ...restArgs);
+    internalMouseDownRef.current = true;
+    (0, _useOpen.macroTask)(() => {
+      internalMouseDownRef.current = false;
+    });
   };
 
   // ============================ Dropdown ============================
@@ -483,7 +484,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     tokenWithEnter: tokenWithEnter
     // Open
     ,
-    onMouseDown: onInternalMouseDown
+    onMouseDown: onRootMouseDown
     // Components
     ,
     components: mergedComponents
@@ -508,7 +509,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter,
-    onPopupMouseDown: onInternalMouseDown,
+    onPopupMouseDown: onRootMouseDown,
     onPopupBlur: onRootBlur
   }, renderNode);
   return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {

package/lib/SelectInput/index.js

@@ -114,12 +114,13 @@ 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._ignore_global_close = true;
-      const inputDOM = (0, _findDOMNode.getDOM)(inputRef.current);
+      event.nativeEvent._ori_target = inputDOM;
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
         event.preventDefault();
       }

package/lib/hooks/useOpen.d.ts

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

package/lib/hooks/useSelectTriggerControl.d.ts

@@ -1,2 +1,3 @@
+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: (open: boolean) => void, customizedTrigger: boolean): void;
+export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: TriggerOpenType, customizedTrigger: boolean): void;

package/lib/hooks/useSelectTriggerControl.js

@@ -22,9 +22,12 @@ 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
-    !event._ignore_global_close && !isInside(elements(), target)) {
+    !isInside(elements(), target)) {
       // Should trigger close
       triggerOpen(false);
     }

package/package.json

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