Skip to content

Commit

Permalink
[@mantine/core] TagsInput: Fix onChange being called twice when Ent…
Browse files Browse the repository at this point in the history
…er key is pressed in some cases (#6416)

Previously, when you selected an option from the dropdown with the arrow keys + Enter key, it would cause the onChange to fire twice if there was a search on the input.
  • Loading branch information
Knamer95 authored Jun 27, 2024
1 parent d105533 commit 828d686
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,15 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {

if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {
event.preventDefault();

const hasActiveSelection = !!document.querySelector<HTMLDivElement>(
`#${combobox.listId} [data-combobox-option][data-combobox-selected]`
);

if (hasActiveSelection) {
return;
}

handleValueSelect(inputValue);
}

Expand Down Expand Up @@ -362,6 +371,8 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
onOptionSubmit?.(val);
setSearchValue('');
_value.length < maxTags! && setValue([..._value, optionsLockup[val].label]);

combobox.resetSelectedOption();
}}
{...comboboxProps}
>
Expand Down

0 comments on commit 828d686

Please sign in to comment.