From c61b5081f83fb5705a6694bcfd9da0a32b2b20e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 11 Apr 2024 11:33:40 +0800
Subject: [PATCH] fix: Click Popup dom should not close the popup (#1037)

* test: test driven

* fix: click popup should not close

* test: fix test case

* chore: fix lint
---
 src/SelectTrigger.tsx                     | 13 ++++------
 tests/Popup.test.tsx                      | 29 +++++++++++++++++++++++
 tests/SelectTrigger.spec.tsx              | 12 ----------
 tests/Tags.test.tsx                       |  1 -
 tests/__mocks__/@rc-component/trigger.tsx |  7 +++---
 5 files changed, 38 insertions(+), 24 deletions(-)
 create mode 100644 tests/Popup.test.tsx

diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx
index 2674254e..6ceee38f 100644
--- a/src/SelectTrigger.tsx
+++ b/src/SelectTrigger.tsx
@@ -1,4 +1,4 @@
-import Trigger from '@rc-component/trigger';
+import Trigger, { type TriggerRef } from '@rc-component/trigger';
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -143,10 +143,10 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
   }
 
   // ======================= Ref =======================
-  const popupRef = React.useRef<HTMLDivElement>(null);
+  const triggerPopupRef = React.useRef<TriggerRef>(null);
 
   React.useImperativeHandle(ref, () => ({
-    getPopupElement: () => popupRef.current,
+    getPopupElement: () => triggerPopupRef.current?.popupElement,
   }));
 
   return (
@@ -158,11 +158,8 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
       builtinPlacements={mergedBuiltinPlacements}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={mergedTransitionName}
-      popup={
-        <div ref={popupRef} onMouseEnter={onPopupMouseEnter}>
-          {popupNode}
-        </div>
-      }
+      popup={<div onMouseEnter={onPopupMouseEnter}>{popupNode}</div>}
+      ref={triggerPopupRef}
       stretch={stretch}
       popupAlign={dropdownAlign}
       popupVisible={visible}
diff --git a/tests/Popup.test.tsx b/tests/Popup.test.tsx
new file mode 100644
index 00000000..f1768e28
--- /dev/null
+++ b/tests/Popup.test.tsx
@@ -0,0 +1,29 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Select from '../src';
+import { injectRunAllTimers } from './utils/common';
+
+// Mock Trigger. Since `__mocks__` already mock the trigger, we should back of origin one.
+jest.mock('@rc-component/trigger', () => {
+  const OriTrigger = jest.requireActual('@rc-component/trigger').default;
+  return OriTrigger;
+});
+
+describe('Select.Popup', () => {
+  injectRunAllTimers(jest);
+
+  it('click popup should not trigger close', () => {
+    const onDropdownVisibleChange = jest.fn();
+    render(
+      <Select
+        open
+        options={[{ value: 'bamboo' }]}
+        onDropdownVisibleChange={onDropdownVisibleChange}
+        getPopupContainer={() => document.body}
+      />,
+    );
+
+    fireEvent.mouseDown(document.querySelector('.rc-select-dropdown'));
+    expect(onDropdownVisibleChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/SelectTrigger.spec.tsx b/tests/SelectTrigger.spec.tsx
index 09bd2f56..20ccbcb4 100644
--- a/tests/SelectTrigger.spec.tsx
+++ b/tests/SelectTrigger.spec.tsx
@@ -2,18 +2,6 @@ import React from 'react';
 import SelectTrigger from '../src/SelectTrigger';
 import { render } from '@testing-library/react';
 
-// Mock Trigger module
-jest.mock('@rc-component/trigger', () => {
-  const OriTrigger = jest.requireActual('@rc-component/trigger').default;
-
-  const MockTrigger = (props: any) => {
-    global.triggerProps = props;
-    return <OriTrigger {...props} />;
-  };
-
-  return MockTrigger;
-});
-
 describe('Select.Trigger', () => {
   it('set popupTransitionName if animation given', () => {
     const SimpleSelectTrigger = SelectTrigger as any;
diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx
index b68d1f8f..b4f9cc9c 100644
--- a/tests/Tags.test.tsx
+++ b/tests/Tags.test.tsx
@@ -424,7 +424,6 @@ describe('Select.Tags', () => {
       expect(container.querySelectorAll('.rc-select-item-option-content')).toHaveLength(1);
 
       keyDown(container.querySelector('input'), KeyCode.ENTER);
-      console.log(container.innerHTML);
       expect(container.querySelectorAll('.rc-select-item')).toHaveLength(5);
     });
 
diff --git a/tests/__mocks__/@rc-component/trigger.tsx b/tests/__mocks__/@rc-component/trigger.tsx
index c7927146..9500c402 100644
--- a/tests/__mocks__/@rc-component/trigger.tsx
+++ b/tests/__mocks__/@rc-component/trigger.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import Trigger from '@rc-component/trigger/lib/mock';
+import type { TriggerProps, TriggerRef } from '@rc-component/trigger';
 
-export default (props) => {
+export default React.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
   global.triggerProps = props;
-  return <Trigger {...props} />;
-};
+  return <Trigger {...props} ref={ref} />;
+});