Revert "chore: adjust order of call (#1183)"

This reverts commit f5509e2.

Author: zombieJ

src/BaseSelect/index.tsx

@@ -21,7 +21,7 @@ import type { RefTriggerProps } from '../SelectTrigger';
 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 type { SelectInputRef } from '../SelectInput';
 import SelectInput from '../SelectInput';
@@ -564,12 +564,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   };
 
   const onRootBlur = () => {
-    // Delay close should check the activeElement
-    if (mergedOpen) {
-      triggerOpen(false, {
-        cancelFun: () => isInside(getSelectElements(), document.activeElement as HTMLElement),
-      });
-    }
+    macroTask(() => {
+      if (!isInside(getSelectElements(), document.activeElement as HTMLElement)) {
+        triggerOpen(false);
+      }
+    });
   };
 
   const onInternalBlur: React.FocusEventHandler<HTMLElement> = (event) => {
@@ -594,14 +593,16 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     }
   };
 
-  const onRootMouseDown: React.MouseEventHandler<HTMLDivElement> = (event, ...restArgs) => {
+  const onInternalMouseDown: React.MouseEventHandler<HTMLDivElement> = (event, ...restArgs) => {
     const { target } = event;
     const popupElement: HTMLDivElement = triggerRef.current?.getPopupElement();
 
     // We should give focus back to selector if clicked item is not focusable
     if (popupElement?.contains(target as HTMLElement) && triggerOpen) {
       // Tell `open` not to close since it's safe in the popup
-      triggerOpen(true);
+      triggerOpen(true, {
+        ignoreNext: true,
+      });
     }
 
     onMouseDown?.(event, ...restArgs);
@@ -746,7 +747,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       // Token handling
       tokenWithEnter={tokenWithEnter}
       // Open
-      onMouseDown={onRootMouseDown}
+      onMouseDown={onInternalMouseDown}
       // Components
       components={mergedComponents}
     />
@@ -773,7 +774,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       empty={emptyOptions}
       onPopupVisibleChange={onTriggerVisibleChange}
       onPopupMouseEnter={onPopupMouseEnter}
-      onPopupMouseDown={onRootMouseDown}
+      onPopupMouseDown={onInternalMouseDown}
       onPopupBlur={onRootBlur}
     >
       {renderNode}

src/SelectInput/index.tsx

@@ -170,14 +170,13 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   // ====================== Open ======================
   const onInternalMouseDown: SelectInputProps['onMouseDown'] = 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 as any)._ori_target = inputDOM;
+      (event.nativeEvent as any)._ignore_global_close = true;
 
+      const inputDOM = getDOM(inputRef.current);
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target as Node)) {
         event.preventDefault();
       }

src/hooks/useOpen.ts

@@ -20,12 +20,13 @@ export const macroTask = (fn: VoidFunction, 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.
  */
 export type TriggerOpenType = (
   nextOpen?: boolean,
   config?: {
-    cancelFun?: () => boolean;
+    ignoreNext?: boolean;
+    lazy?: boolean;
   },
 ) => void;
 
@@ -57,6 +58,7 @@ export default function useOpen(
   const mergedOpen = postOpen(ssrSafeOpen);
 
   const taskIdRef = useRef(0);
+  const taskLockRef = useRef(false);
 
   const triggerEvent = useEvent((nextOpen: boolean) => {
     if (onOpen && mergedOpen !== nextOpen) {
@@ -66,32 +68,35 @@ export default function useOpen(
   });
 
   const toggleOpen = useEvent<TriggerOpenType>((nextOpen, config = {}) => {
-    const { cancelFun } = config;
+    const { 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?.()
-      ) {
+    // Since `mergedOpen` is post-processed, we need to check if the value really changed
+    if (nextOpenVal) {
+      if (!taskLockRef.current) {
         triggerEvent(nextOpenVal);
+
+        // Lock if needed
+        if (ignoreNext) {
+          taskLockRef.current = ignoreNext;
+
+          macroTask(() => {
+            taskLockRef.current = false;
+          }, 3);
+        }
       }
+      return;
     }
 
-    // Weak update can be ignored
-    if (nextOpenVal) {
-      triggerUpdate();
-    } else {
-      macroTask(() => {
-        triggerUpdate();
-      });
-    }
+    macroTask(() => {
+      if (id === taskIdRef.current && !taskLockRef.current) {
+        triggerEvent(nextOpenVal);
+      }
+    });
   });
 
   return [mergedOpen, toggleOpen] as const;

src/hooks/useSelectTriggerControl.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useEvent } from '@rc-component/util';
-import type { TriggerOpenType } from './useOpen';
 
 export function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement) {
   return elements
@@ -11,7 +10,7 @@ export function isInside(elements: (HTMLElement | SVGElement | undefined)[], tar
 export default function useSelectTriggerControl(
   elements: () => (HTMLElement | SVGElement | undefined)[],
   open: boolean,
-  triggerOpen: TriggerOpenType,
+  triggerOpen: (open: boolean) => void,
   customizedTrigger: boolean,
 ) {
   const onGlobalMouseDown = useEvent((event: MouseEvent) => {
@@ -26,13 +25,10 @@ export default function useSelectTriggerControl(
       target = (event.composedPath()[0] || target) as HTMLElement;
     }
 
-    if ((event as any)._ori_target) {
-      target = (event as any)._ori_target;
-    }
-
     if (
       open &&
       // Marked by SelectInput mouseDown event
+      !(event as any)._ignore_global_close &&
       !isInside(elements(), target)
     ) {
       // Should trigger close

tests/Select.test.tsx

@@ -561,7 +561,7 @@ describe('Select.Basic', () => {
       </Select>,
     );
 
-    keyDown(container.querySelector('input'), KeyCode.DOWN);
+    keyDown(container.querySelector('input'), 40);
     expectOpen(container);
   });
 
@@ -2524,9 +2524,9 @@ describe('Select.Basic', () => {
     await waitFakeTimer();
     expectOpen(container, true);
 
-    keyDown(inputElem!, KeyCode.DOWN);
-    keyUp(inputElem!, KeyCode.DOWN);
-    keyDown(inputElem!, KeyCode.ENTER);
+    keyDown(inputElem!, 40);
+    keyUp(inputElem!, 40);
+    keyDown(inputElem!, 13);
 
     await waitFakeTimer();
     expect(onBlur).toHaveBeenCalledTimes(1);
@@ -2537,9 +2537,9 @@ describe('Select.Basic', () => {
     await waitFakeTimer();
     expectOpen(container, true);
 
-    keyDown(inputElem!, KeyCode.DOWN);
-    keyUp(inputElem!, KeyCode.DOWN);
-    keyDown(inputElem!, KeyCode.ENTER);
+    keyDown(inputElem!, 40);
+    keyUp(inputElem!, 40);
+    keyDown(inputElem!, 13);
 
     await waitFakeTimer();
     expect(onBlur).toHaveBeenCalledTimes(2);