[@mantine/core] Implement selectFirstOptionOnChange for TagsInput

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,
+};

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),

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';

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,
@@ -334,6 +334,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}