Skip to content

Commit 0708f78

Browse files
committed
fix: avoid closing dropdown on input mousedown in multiple mode
1 parent 700c9f8 commit 0708f78

2 files changed

Lines changed: 28 additions & 1 deletion

File tree

src/SelectInput/index.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,13 +180,23 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
180180
// so we need to mark the event directly
181181
(event.nativeEvent as any)._ori_target = inputDOM;
182182

183+
const target = event.target as Node | null;
184+
const isClickOnInput =
185+
!!inputDOM && !!target && (target === inputDOM || inputDOM.contains(target));
186+
183187
if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target as Node)) {
184188
event.preventDefault();
185189
}
186190

187191
// Check if we should prevent closing when clicking on selector
188192
// Don't close if: open && not multiple && (combobox mode || showSearch)
189-
const shouldPreventClose = triggerOpen && !multiple && (mode === 'combobox' || showSearch);
193+
const shouldPreventCloseOnSingle =
194+
triggerOpen && !multiple && (mode === 'combobox' || showSearch);
195+
196+
// Don't close if: open && multiple && click on input
197+
const shouldPreventCloseOnMultipleInput = triggerOpen && !!multiple && isClickOnInput;
198+
199+
const shouldPreventClose = shouldPreventCloseOnSingle || shouldPreventCloseOnMultipleInput;
190200

191201
if (!(event.nativeEvent as any)._select_lazy) {
192202
inputRef.current?.focus();

tests/Multiple.test.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -712,5 +712,22 @@ describe('Select.Multiple', () => {
712712
toggleOpen(container);
713713
expect(container.querySelector('input')).toHaveValue('');
714714
});
715+
716+
it('should not close dropdown when mousedown on input in multiple mode (text selection)', () => {
717+
const { container } = render(
718+
<Select mode="multiple" showSearch options={[{ value: 'light' }]} />,
719+
);
720+
721+
const input = container.querySelector('input') as HTMLInputElement;
722+
723+
// Open dropdown first
724+
toggleOpen(container);
725+
expectOpen(container, true);
726+
727+
// Start interaction from input (simulate starting text selection / cursor move)
728+
fireEvent.mouseDown(input);
729+
730+
expectOpen(container, true);
731+
});
715732
});
716733
});

0 commit comments

Comments
 (0)