Allow free text on taginput (#307)

* Allow free text on taginput

* Address PR comments

* Tests

Author: irees

playground/app/pages/controls/taginput.vue

@@ -127,6 +127,20 @@
         </p>
       </t-demo-box>
 
+      <!-- Allow New (Free-form) -->
+      <t-demo-box label="Allow New Tags">
+        <t-taginput
+          v-model="allowNewSelected"
+          :options="fruitOptions"
+          placeholder="Type and press Enter or comma..."
+          allow-new
+          open-on-focus
+        />
+        <p class="has-text-grey mt-3">
+          Type any text and press Enter or comma to add a custom tag. Selected: {{ allowNewSelected }}
+        </p>
+      </t-demo-box>
+
       <!-- Not Closable -->
       <t-demo-box label="Non-closable Tags">
         <t-taginput
@@ -303,6 +317,7 @@ const readonlySelected = ref<string[]>(['apple', 'cherry', 'grape'])
 const maxTagsSelected = ref<string[]>(['apple'])
 const notClosableSelected = ref<string[]>(['apple'])
 const customSelected = ref<number[]>([1, 3])
+const allowNewSelected = ref<string[]>([])
 const searchSelected = ref<string[]>([])
 const searchText = ref('')
 

src/runtime/controls/taginput.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest'
+import TTaginput from '../controls/taginput.vue'
+import {
+  mountComponent,
+  triggerKeyboard
+} from '../lib/testutil/component-helpers'
+
+const fruitOptions = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' }
+]
+
+describe('TTaginput allowNew', () => {
+  it('adds a free-form tag on Enter', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: [], options: fruitOptions, allowNew: true }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('custom')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    const emitted = wrapper.emitted('update:modelValue') as string[][]
+    expect(emitted[emitted.length - 1]).toEqual([['custom']])
+  })
+
+  it('adds a free-form tag on separator key', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: [], options: fruitOptions, allowNew: true }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('newtag')
+    await triggerKeyboard(wrapper, ',', 'input')
+    const emitted = wrapper.emitted('update:modelValue') as string[][]
+    expect(emitted[emitted.length - 1]).toEqual([['newtag']])
+  })
+
+  it('does not add free-form tag when allowNew is false', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: [], options: fruitOptions, allowNew: false }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('custom')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('does not add duplicate tags', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: ['existing'], options: fruitOptions, allowNew: true }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('existing')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    // Should clear input but not emit a new modelValue with duplicate
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('respects maxTags limit', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: ['a', 'b'], options: fruitOptions, allowNew: true, maxTags: 2 }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('third')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('trims whitespace from new tags', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: [], options: fruitOptions, allowNew: true }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('  spaced  ')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    const emitted = wrapper.emitted('update:modelValue') as string[][]
+    expect(emitted[emitted.length - 1]).toEqual([['spaced']])
+  })
+
+  it('does not add empty tags', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: [], options: fruitOptions, allowNew: true }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('   ')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('selects dropdown option over free-form when highlighted', async () => {
+    const wrapper = mountComponent(TTaginput, {
+      props: { modelValue: [], options: fruitOptions, allowNew: true }
+    })
+    const input = wrapper.find('input')
+    await input.setValue('a') // filters to Apple
+    // Arrow down to highlight first option, then Enter
+    await triggerKeyboard(wrapper, 'ArrowDown', 'input')
+    await triggerKeyboard(wrapper, 'Enter', 'input')
+    const emitted = wrapper.emitted('update:modelValue') as string[][]
+    expect(emitted[emitted.length - 1]).toEqual([['apple']])
+  })
+})

src/runtime/controls/taginput.vue

@@ -170,6 +170,10 @@ const props = withDefaults(defineProps<{
   emptyText?: string
   /** Maximum number of tags that can be selected. When undefined, there is no limit. */
   maxTags?: number
+  /** Allow creating new tags not in the options list. Only for string-typed taginputs. @default false */
+  allowNew?: boolean
+  /** Separator keys that trigger creating a new tag (in addition to Enter). @default [','] */
+  separators?: string[]
 }>(), {
   options: () => [],
   placeholder: '',
@@ -184,7 +188,9 @@ const props = withDefaults(defineProps<{
   closable: true,
   rounded: false,
   emptyText: 'None selected',
-  maxTags: undefined
+  maxTags: undefined,
+  allowNew: false,
+  separators: () => [',']
 })
 
 const emit = defineEmits<{
@@ -361,6 +367,8 @@ function handleKeydown (event: KeyboardEvent) {
         if (option) {
           selectOption(option)
         }
+      } else {
+        addNewTag()
       }
       break
     case 'Escape':
@@ -375,7 +383,30 @@ function handleKeydown (event: KeyboardEvent) {
         }
       }
       break
+    default:
+      if (props.allowNew && props.separators.includes(event.key)) {
+        event.preventDefault()
+        addNewTag()
+      }
+      break
+  }
+}
+
+function addNewTag () {
+  const text = searchText.value.trim()
+  if (!text || !props.allowNew || isMaxReached.value) return false
+  // Check if it already exists as a selected value
+  if (modelValue.value.includes(text as T)) {
+    searchText.value = ''
+    return true
   }
+  const option: TagOption = { value: text as T, label: text }
+  modelValue.value = [...modelValue.value, text as T]
+  emit('select', option)
+  searchText.value = ''
+  highlightedIndex.value = -1
+  inputRef.value?.focus()
+  return true
 }
 
 function selectOption (option: TagOption) {