[@mantine/core] Fix onChange on TagsInput firing twice

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.
mantinedev · Jun 19, 2024 · 8ca7f50 · 8ca7f50
1 parent 29f24e3
commit 8ca7f50
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
@@ -263,6 +263,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;
+      }
+
       const isDuplicate = _value.some((tag) => tag.toLowerCase() === inputValue.toLowerCase());
 
       if (isDuplicate) {
@@ -353,6 +362,8 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
           onOptionSubmit?.(val);
           setSearchValue('');
           _value.length < maxTags! && setValue([..._value, optionsLockup[val].label]);
+
+          combobox.resetSelectedOption();
         }}
         {...comboboxProps}
       >