diff --git a/src/SelectInput/index.tsx b/src/SelectInput/index.tsx index 4c22a537..1cb3d558 100644 --- a/src/SelectInput/index.tsx +++ b/src/SelectInput/index.tsx @@ -180,13 +180,21 @@ export default React.forwardRef(function Selec // so we need to mark the event directly (event.nativeEvent as any)._ori_target = inputDOM; - if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target as Node)) { + const isClickOnInput = inputDOM === event.target || inputDOM?.contains(event.target as Node); + + if (inputDOM && !isClickOnInput) { event.preventDefault(); } // Check if we should prevent closing when clicking on selector // Don't close if: open && not multiple && (combobox mode || showSearch) - const shouldPreventClose = triggerOpen && !multiple && (mode === 'combobox' || showSearch); + const shouldPreventCloseOnSingle = + triggerOpen && !multiple && (mode === 'combobox' || showSearch); + + // Don't close if: open && multiple && click on input + const shouldPreventCloseOnMultipleInput = triggerOpen && multiple && isClickOnInput; + + const shouldPreventClose = shouldPreventCloseOnSingle || shouldPreventCloseOnMultipleInput; if (!(event.nativeEvent as any)._select_lazy) { inputRef.current?.focus(); diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx index 9a2666f9..ee76ebcf 100644 --- a/tests/Multiple.test.tsx +++ b/tests/Multiple.test.tsx @@ -712,5 +712,22 @@ describe('Select.Multiple', () => { toggleOpen(container); expect(container.querySelector('input')).toHaveValue(''); }); + + it('should not close dropdown when mousedown on input in multiple mode (text selection)', () => { + const { container } = render( +