fix: mouseDown on the hidden element should not trigger close (#1178)

Author: zombieJ

src/SelectInput/index.tsx

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

src/hooks/useSelectTriggerControl.ts

@@ -21,6 +21,8 @@ export default function useSelectTriggerControl(
 
     if (
       open &&
+      // Marked by SelectInput mouseDown event
+      !(event as any)._ignore_global_close &&
       elements()
         .filter((element) => element)
         .every((element) => !element.contains(target) && element !== target)

tests/Select.test.tsx

@@ -389,6 +389,46 @@ describe('Select.Basic', () => {
     expect(container.querySelector('input').getAttribute('readonly')).toBeFalsy();
   });
 
+  it('dynamic change icon should not trigger close', () => {
+    const Demo = () => {
+      const [open, setOpen] = React.useState(false);
+
+      return (
+        <Select
+          open={open}
+          onPopupVisibleChange={setOpen}
+          showSearch
+          suffix={
+            open ? (
+              <span className="bamboo" key="bamboo" />
+            ) : (
+              <span className="little" key="little" />
+            )
+          }
+        />
+      );
+    };
+
+    const { container } = render(<Demo />);
+    const suffix = container.querySelector('.little');
+
+    const mouseDownEvent = createEvent.mouseDown(suffix);
+
+    // First click on the element and re-render to remove the node
+    fireEvent(suffix, mouseDownEvent);
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // Then popup to the window event (jsdom can not mock this. so we just fire directly)
+    fireEvent(window, mouseDownEvent);
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expectOpen(container);
+  });
+
   it('should keep dropdown open when clicking inside popup to prevent accidental close', async () => {
     const { container } = render(
       <Select