Skip to content

Commit c61b508

Browse files
authored
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
1 parent 1fdcb7a commit c61b508

File tree

5 files changed

+38
-24
lines changed

5 files changed

+38
-24
lines changed

src/SelectTrigger.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Trigger from '@rc-component/trigger';
1+
import Trigger, { type TriggerRef } from '@rc-component/trigger';
22
import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
33
import classNames from 'classnames';
44
import * as React from 'react';
@@ -143,10 +143,10 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
143143
}
144144

145145
// ======================= Ref =======================
146-
const popupRef = React.useRef<HTMLDivElement>(null);
146+
const triggerPopupRef = React.useRef<TriggerRef>(null);
147147

148148
React.useImperativeHandle(ref, () => ({
149-
getPopupElement: () => popupRef.current,
149+
getPopupElement: () => triggerPopupRef.current?.popupElement,
150150
}));
151151

152152
return (
@@ -158,11 +158,8 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
158158
builtinPlacements={mergedBuiltinPlacements}
159159
prefixCls={dropdownPrefixCls}
160160
popupTransitionName={mergedTransitionName}
161-
popup={
162-
<div ref={popupRef} onMouseEnter={onPopupMouseEnter}>
163-
{popupNode}
164-
</div>
165-
}
161+
popup={<div onMouseEnter={onPopupMouseEnter}>{popupNode}</div>}
162+
ref={triggerPopupRef}
166163
stretch={stretch}
167164
popupAlign={dropdownAlign}
168165
popupVisible={visible}

tests/Popup.test.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { fireEvent, render } from '@testing-library/react';
2+
import React from 'react';
3+
import Select from '../src';
4+
import { injectRunAllTimers } from './utils/common';
5+
6+
// Mock Trigger. Since `__mocks__` already mock the trigger, we should back of origin one.
7+
jest.mock('@rc-component/trigger', () => {
8+
const OriTrigger = jest.requireActual('@rc-component/trigger').default;
9+
return OriTrigger;
10+
});
11+
12+
describe('Select.Popup', () => {
13+
injectRunAllTimers(jest);
14+
15+
it('click popup should not trigger close', () => {
16+
const onDropdownVisibleChange = jest.fn();
17+
render(
18+
<Select
19+
open
20+
options={[{ value: 'bamboo' }]}
21+
onDropdownVisibleChange={onDropdownVisibleChange}
22+
getPopupContainer={() => document.body}
23+
/>,
24+
);
25+
26+
fireEvent.mouseDown(document.querySelector('.rc-select-dropdown'));
27+
expect(onDropdownVisibleChange).not.toHaveBeenCalled();
28+
});
29+
});

tests/SelectTrigger.spec.tsx

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,6 @@ import React from 'react';
22
import SelectTrigger from '../src/SelectTrigger';
33
import { render } from '@testing-library/react';
44

5-
// Mock Trigger module
6-
jest.mock('@rc-component/trigger', () => {
7-
const OriTrigger = jest.requireActual('@rc-component/trigger').default;
8-
9-
const MockTrigger = (props: any) => {
10-
global.triggerProps = props;
11-
return <OriTrigger {...props} />;
12-
};
13-
14-
return MockTrigger;
15-
});
16-
175
describe('Select.Trigger', () => {
186
it('set popupTransitionName if animation given', () => {
197
const SimpleSelectTrigger = SelectTrigger as any;

tests/Tags.test.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,6 @@ describe('Select.Tags', () => {
424424
expect(container.querySelectorAll('.rc-select-item-option-content')).toHaveLength(1);
425425

426426
keyDown(container.querySelector('input'), KeyCode.ENTER);
427-
console.log(container.innerHTML);
428427
expect(container.querySelectorAll('.rc-select-item')).toHaveLength(5);
429428
});
430429

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import Trigger from '@rc-component/trigger/lib/mock';
3+
import type { TriggerProps, TriggerRef } from '@rc-component/trigger';
34

4-
export default (props) => {
5+
export default React.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
56
global.triggerProps = props;
6-
return <Trigger {...props} />;
7-
};
7+
return <Trigger {...props} ref={ref} />;
8+
});

0 commit comments

Comments
 (0)