[@mantine/core] TagsInput: Fix selectFirstOptionOnChange prop not w…

…orking (#6337) * [@mantine/core] Implement selectFirstOptionOnChange for TagsInput * Fix prettier test * More consistent approach * Prettier again * Revert onChange for TagsInput to remove from diff * Remove selectFirstOptionOnChange from groups demo --------- Co-authored-by: Alex Lapp <[email protected]>
mantinedev · Jun 27, 2024 · 7a321ea · 7a321ea
1 parent f490181
commit 7a321ea
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/packages/@docs/demos/src/demos/core/TagsInput/TagsInput.demo.selectFirst.tsx b/packages/@docs/demos/src/demos/core/TagsInput/TagsInput.demo.selectFirst.tsx
@@ -0,0 +1,38 @@
+import { TagsInput } from '@mantine/core';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { TagsInput } from '@mantine/core';
+
+function Demo() {
+  return (
+    <TagsInput
+      label="Enter tags"
+      placeholder="Enter tags"
+      selectFirstOptionOnChange
+      data={[
+        'Apple', 'Banana', 'Kiwi', 'Mango', 'Watermelon', 'Raspberry', 'Strawberry',
+      ]}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <TagsInput
+      label="Enter tags"
+      placeholder="Enter tags"
+      selectFirstOptionOnChange
+      data={['Apple', 'Banana', 'Kiwi', 'Mango', 'Watermelon', 'Raspberry', 'Strawberry']}
+    />
+  );
+}
+
+export const selectFirst: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  maxWidth: 340,
+  centered: true,
+};
diff --git a/packages/@docs/demos/src/demos/core/TagsInput/TagsInput.demos.story.tsx b/packages/@docs/demos/src/demos/core/TagsInput/TagsInput.demos.story.tsx
@@ -68,6 +68,11 @@ export const Demo_search = {
   render: renderDemo(demos.search),
 };
 
+export const Demo_selectFirst = {
+  name: '⭐ Demo: selectFirstOptionOnChange',
+  render: renderDemo(demos.selectFirst),
+};
+
 export const Demo_scrollArea = {
   name: '⭐ Demo: scrollArea',
   render: renderDemo(demos.scrollArea),

diff --git a/packages/@docs/demos/src/demos/core/TagsInput/index.ts b/packages/@docs/demos/src/demos/core/TagsInput/index.ts
@@ -25,3 +25,4 @@ export { withinPopover } from './TagsInput.demo.withinPopover';
 export { renderOption } from './TagsInput.demo.renderOption';
 export { dropdownWidth } from './TagsInput.demo.dropdownWidth';
 export { acceptValueOnBlur } from './TagsInput.demo.acceptValueOnBlur';
+export { selectFirst } from './TagsInput.demo.selectFirst';
diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';
 import {
   BoxProps,
@@ -343,6 +343,12 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
     </Pill>
   ));
 
+  useEffect(() => {
+    if (selectFirstOptionOnChange) {
+      combobox.selectFirstOption();
+    }
+  }, [selectFirstOptionOnChange, _value, _searchValue]);
+
   const clearButton = clearable && _value.length > 0 && !disabled && !readOnly && (
     <Combobox.ClearButton
       size={size as string}