fix: blur should not trigger close when next activeElement still is input ref (#1175)

* fix: blur to close logic

* test: fix test case

* chore: clean up

Author: zombieJ

src/BaseSelect/index.tsx

@@ -570,9 +570,6 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     }
 
     if (!disabled) {
-      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,16 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   });
 
   const onInternalBlur: SelectInputProps['onBlur'] = (event) => {
-    toggleOpen(false);
+    macroTask(() => {
+      const inputNode = getDOM(inputRef.current);
+      if (
+        !inputNode ||
+        (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/Combobox.test.tsx

@@ -503,6 +503,8 @@ describe('Select.Combobox', () => {
     }
 
     fireEvent.blur(container.querySelector('input')!);
+    container.querySelector('input').blur();
+
     await delay(100);
 
     expectOpen(container, false);
@@ -591,6 +593,7 @@ describe('Select.Combobox', () => {
 
     fireEvent.blur(container.querySelector('input'));
     act(() => {
+      container.querySelector('input').blur();
       jest.runAllTimers();
     });
 

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);