diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx index a3d2b49e6..d4bf2c4be 100644 --- a/src/Selector/MultipleSelector.tsx +++ b/src/Selector/MultipleSelector.tsx @@ -4,15 +4,15 @@ import classNames from 'classnames'; import pickAttrs from 'rc-util/lib/pickAttrs'; import Overflow from 'rc-overflow'; import TransBtn from '../TransBtn'; -import { +import type { LabelValueType, DisplayLabelValueType, RawValueType, CustomTagProps, DefaultValueType, } from '../interface/generator'; -import { RenderNode } from '../interface'; -import { InnerSelectorProps } from '.'; +import type { RenderNode } from '../interface'; +import type { InnerSelectorProps } from '.'; import Input from './Input'; import useLayoutEffect from '../hooks/useLayoutEffect'; @@ -35,11 +35,7 @@ interface SelectorProps extends InnerSelectorProps { onSelect: (value: RawValueType, option: { selected: boolean }) => void; } -const onPreventMouseDown = (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); -}; -const SelectSelector: React.FC = props => { +const SelectSelector: React.FC = (props) => { const { id, prefixCls, @@ -107,7 +103,6 @@ const SelectSelector: React.FC = props => { {closable && ( @@ -125,8 +120,7 @@ const SelectSelector: React.FC = props => { closable: boolean, onClose: React.MouseEventHandler, ) { - const onMouseDown = (e: React.MouseEvent) => { - onPreventMouseDown(e); + const onMouseDown = () => { onToggleOpen(true); }; diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index d1fb1e2a3..f987a9d06 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -224,15 +224,19 @@ const Selector: React.RefForwardingComponent = const onMouseDown: React.MouseEventHandler = (event) => { const inputMouseDown = getInputMouseDown(); - if (event.target !== inputRef.current && !inputMouseDown) { - event.preventDefault(); - } + const tagCloseMouseDown = (event.target as HTMLElement).innerText === '×'; + + if (!tagCloseMouseDown) { + if (event.target !== inputRef.current && !inputMouseDown) { + event.preventDefault(); + } - if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) { - if (open) { - onSearch('', true, false); + if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) { + if (open) { + onSearch('', true, false); + } + onToggleOpen(); } - onToggleOpen(); } }; diff --git a/tests/utils/common.ts b/tests/utils/common.ts index 31277ffc9..a6eb0d480 100644 --- a/tests/utils/common.ts +++ b/tests/utils/common.ts @@ -15,10 +15,7 @@ export function toggleOpen(wrapper: any) { } export function selectItem(wrapper: any, index: number = 0) { - wrapper - .find('div.rc-select-item-option-content') - .at(index) - .simulate('click'); + wrapper.find('div.rc-select-item-option-content').at(index).simulate('click'); } export function findSelection(wrapper: any, index: number = 0) { @@ -33,17 +30,13 @@ export function findSelection(wrapper: any, index: number = 0) { } export function removeSelection(wrapper: any, index: number = 0) { - const preventDefault = jest.fn(); - wrapper .find('.rc-select-selection-item') .at(index) .find('.rc-select-selection-item-remove') .last() - .simulate('mousedown', { preventDefault }) - .simulate('click'); - - expect(preventDefault).toHaveBeenCalled(); + .simulate('click') + .simulate('mousedown'); } type Jest = typeof jest;