[@mantine/core] TagsInput: Improve clearable prop logic related to …

…dropdown (#6115)
mantinedev · May 10, 2024 · 3cc0cd0 · 3cc0cd0
1 parent be4b4ab
commit 3cc0cd0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx b/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
@@ -123,6 +123,15 @@ export function Clearable() {
         clearable
       />
 
+      <MultiSelect
+        placeholder="Searchable"
+        data={['React', 'Angular', 'Svelte']}
+        defaultValue={['React']}
+        clearable
+        searchable
+        mt="md"
+      />
+
       <MultiSelect
         placeholder="Disabled"
         data={['React', 'Angular', 'Svelte']}

diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
@@ -1,4 +1,5 @@
-import { useId, useUncontrolled } from '@mantine/hooks';
+import { useRef } from 'react';
+import { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';
 import {
   BoxProps,
   ElementProps,
@@ -193,6 +194,8 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
   const _id = useId(id);
   const parsedData = getParsedComboboxData(data);
   const optionsLockup = getOptionsLockup(parsedData);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const _ref = useMergedRef(inputRef, ref);
 
   const combobox = useCombobox({
     opened: dropdownOpened,
@@ -329,6 +332,8 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
       onClear={() => {
         setValue([]);
         setSearchValue('');
+        inputRef.current?.focus();
+        combobox.openDropdown();
         onClear?.();
       }}
     />
@@ -394,7 +399,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
               <Combobox.EventsTarget autoComplete={autoComplete}>
                 <PillsInput.Field
                   {...rest}
-                  ref={ref}
+                  ref={_ref}
                   {...getStyles('inputField')}
                   unstyled={unstyled}
                   onKeyDown={handleInputKeydown}