fix(core): Ensure TagsInput dropdown reopens on input click after clear

mantinedev · May 9, 2024 · 3a43d08 · 3a43d08
1 parent 44c3ffd
commit 3a43d08
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/@mantine/core/src/components/PillsInput/PillsInput.tsx b/packages/@mantine/core/src/components/PillsInput/PillsInput.tsx
@@ -4,6 +4,7 @@ import { __BaseInputProps, __InputStylesNames } from '../Input';
 import { InputBase } from '../InputBase';
 import { PillsInputProvider } from './PillsInput.context';
 import { PillsInputField } from './PillsInputField/PillsInputField';
+import { ComboboxParsedItem } from '../Combobox';
 
 export interface PillsInputProps
   extends BoxProps,
@@ -13,6 +14,9 @@ export interface PillsInputProps
   __stylesApiProps?: Record<string, any>;
   __staticSelector?: string;
   multiline?: boolean;
+  openDropdown: () => void;
+  dropdownOpened: boolean;
+  parsedData: ComboboxParsedItem[];
 }
 
 export type PillsInputFactory = Factory<{
@@ -32,8 +36,11 @@ export const PillsInput = factory<PillsInputFactory>((_props, ref) => {
     children,
     onMouseDown,
     onClick,
+    openDropdown,
     size,
     disabled,
+    dropdownOpened,
+    parsedData,
     __staticSelector,
     error,
     variant,
@@ -59,6 +66,9 @@ export const PillsInput = factory<PillsInputFactory>((_props, ref) => {
           event.preventDefault();
           onClick?.(event);
           fieldRef.current?.focus();
+          if(!dropdownOpened && parsedData.length > 0) {
+            openDropdown();
+          }
         }}
         {...others}
         multiline

diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
@@ -388,6 +388,9 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
             __stylesApiProps={{ ...props, multiline: true }}
             id={_id}
             mod={mod}
+            openDropdown={combobox.openDropdown}
+            dropdownOpened={combobox.dropdownOpened}
+            parsedData={parsedData}
           >
             <Pill.Group disabled={disabled} unstyled={unstyled} {...getStyles('pillsList')}>
               {values}