fix: blur to close logic

Author: zombieJ

src/BaseSelect/index.tsx

@@ -570,9 +570,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     }
 
     if (!disabled) {
-      triggerOpen(false, {
-        lazy: true,
-      });
+      // triggerOpen(false, {
+      //   lazy: true,
+      // });
       onBlur?.(event);
     }
   };

src/SelectInput/index.tsx

@@ -11,6 +11,7 @@ import { clsx } from 'clsx';
 import type { ComponentsConfig } from '../hooks/useComponents';
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import { composeRef } from '@rc-component/util/lib/ref';
+import { macroTask } from '../hooks/useOpen';
 
 export interface SelectInputRef {
   focus: (options?: FocusOptions) => void;
@@ -197,7 +198,13 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   });
 
   const onInternalBlur: SelectInputProps['onBlur'] = (event) => {
-    toggleOpen(false);
+    macroTask(() => {
+      const inputNode = getDOM(inputRef.current);
+      if (inputNode !== document.activeElement && !inputNode.contains(document.activeElement)) {
+        toggleOpen(false);
+      }
+    });
+
     onBlur?.(event);
   };
 

src/hooks/useOpen.ts

@@ -7,7 +7,7 @@ const internalMacroTask = (fn: VoidFunction) => {
   channel.port2.postMessage(null);
 };
 
-const macroTask = (fn: VoidFunction, times = 1) => {
+export const macroTask = (fn: VoidFunction, times = 1) => {
   if (times <= 0) {
     fn();
     return;
@@ -68,15 +68,15 @@ export default function useOpen(
   });
 
   const toggleOpen = useEvent<TriggerOpenType>((nextOpen, config = {}) => {
-    const { ignoreNext = false, lazy = false } = config;
+    const { ignoreNext = false } = 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 || !lazy) {
+    if (nextOpenVal) {
       if (!taskLockRef.current) {
         triggerEvent(nextOpenVal);
 

tests/Select.test.tsx

@@ -807,6 +807,8 @@ describe('Select.Basic', () => {
       toggleOpen(container);
       fireEvent.blur(container.querySelector('input'));
       act(() => {
+        // Force trigger blur to active to document.body
+        container.querySelector('input').blur();
         jest.runAllTimers();
       });
       expectOpen(container, false);