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

@@ -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}

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();
+  });
+});

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;

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

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} />;
+});