diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index f84db265f..c0923e524 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -12,11 +12,7 @@ import * as React from 'react'; import KeyCode from 'rc-util/lib/KeyCode'; import MultipleSelector from './MultipleSelector'; import SingleSelector from './SingleSelector'; -import { - LabelValueType, - RawValueType, - CustomTagProps, -} from '../interface/generator'; +import { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator'; import { RenderNode, Mode } from '../interface'; import useLock from '../hooks/useLock'; @@ -36,15 +32,9 @@ export interface InnerSelectorProps { open: boolean; tabIndex?: number; - onInputKeyDown: React.KeyboardEventHandler< - HTMLInputElement | HTMLTextAreaElement - >; - onInputMouseDown: React.MouseEventHandler< - HTMLInputElement | HTMLTextAreaElement - >; - onInputChange: React.ChangeEventHandler< - HTMLInputElement | HTMLTextAreaElement - >; + onInputKeyDown: React.KeyboardEventHandler; + onInputMouseDown: React.MouseEventHandler; + onInputChange: React.ChangeEventHandler; } export interface RefSelectorProps { @@ -75,9 +65,7 @@ export interface SelectorProps { // Tags maxTagCount?: number; maxTagTextLength?: number; - maxTagPlaceholder?: - | React.ReactNode - | ((omittedValues: LabelValueType[]) => React.ReactNode); + maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode); tagRender?: (props: CustomTagProps) => React.ReactElement; // Motion @@ -87,9 +75,7 @@ export interface SelectorProps { /** `onSearch` returns go next step boolean to check if need do toggle open */ onSearch: (searchValue: string) => boolean; onSelect: (value: RawValueType, option: { selected: boolean }) => void; - onInputKeyDown?: React.KeyboardEventHandler< - HTMLInputElement | HTMLTextAreaElement - >; + onInputKeyDown?: React.KeyboardEventHandler; /** * @private get real dom for trigger align. @@ -98,10 +84,7 @@ export interface SelectorProps { domRef: React.Ref; } -const Selector: React.RefForwardingComponent< - RefSelectorProps, - SelectorProps -> = (props, ref) => { +const Selector: React.RefForwardingComponent = (props, ref) => { const inputRef = React.useRef(null); const { @@ -109,6 +92,7 @@ const Selector: React.RefForwardingComponent< multiple, open, mode, + showSearch, onSearch, onToggleOpen, @@ -130,9 +114,7 @@ const Selector: React.RefForwardingComponent< // ====================== Input ====================== const [getInputMouseDown, setInputMouseDown] = useLock(0); - const onInternalInputKeyDown: React.KeyboardEventHandler< - HTMLInputElement - > = event => { + const onInternalInputKeyDown: React.KeyboardEventHandler = event => { const { which } = event; if (which === KeyCode.UP || which === KeyCode.DOWN) { @@ -143,11 +125,7 @@ const Selector: React.RefForwardingComponent< onInputKeyDown(event); } - if ( - ![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes( - which, - ) - ) { + if (![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(which)) { onToggleOpen(true); } }; @@ -156,9 +134,7 @@ const Selector: React.RefForwardingComponent< * We can not use `findDOMNode` sine it will get warning, * have to use timer to check if is input element. */ - const onInternalInputMouseDown: React.MouseEventHandler< - HTMLInputElement - > = () => { + const onInternalInputMouseDown: React.MouseEventHandler = () => { setInputMouseDown(true); }; @@ -177,11 +153,12 @@ const Selector: React.RefForwardingComponent< }; const onMouseDown: React.MouseEventHandler = event => { - if (event.target !== inputRef.current && !getInputMouseDown()) { + const inputMouseDown = getInputMouseDown(); + if (event.target !== inputRef.current && !inputMouseDown) { event.preventDefault(); } - if (mode !== 'combobox' || !open) { + if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) { onToggleOpen(); } }; @@ -212,9 +189,7 @@ const Selector: React.RefForwardingComponent< ); }; -const ForwardSelector = React.forwardRef( - Selector, -); +const ForwardSelector = React.forwardRef(Selector); ForwardSelector.displayName = 'Selector'; export default ForwardSelector; diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx index 988dbfe09..ae3dc1944 100644 --- a/tests/Multiple.test.tsx +++ b/tests/Multiple.test.tsx @@ -145,6 +145,7 @@ describe('Select.Multiple', () => { selectItem(wrapper, 1); toggleOpen(wrapper); + expectOpen(wrapper, false); removeSelection(wrapper); expectOpen(wrapper, false); expect(wrapper.find('Selector').props().values).toEqual([ diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index db4d9843b..b77e4988b 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -461,6 +461,20 @@ describe('Select.Basic', () => { expect(handleSearch).not.toHaveBeenCalled(); }); + it('not close when click on the input', () => { + const wrapper = mount( + , + ); + + for (let i = 0; i < 10; i += 1) { + wrapper.find('input').simulate('mousedown'); + expectOpen(wrapper); + } + }); + // Should always trigger search event: // https://github.com/ant-design/ant-design/issues/16223 // https://github.com/ant-design/ant-design/issues/10817