fix(Combobox): prevent addOnBlur from adding raw input when selecting item (#2514)

kricsleo · web-flow · commit bc1db7271958 · 2026-03-19T09:09:28.000+08:00
* fix(Combobox): prevent `addOnBlur` from adding raw input when selecting item

* chore: comments
diff --git a/packages/core/src/Combobox/Combobox.test.ts b/packages/core/src/Combobox/Combobox.test.ts
@@ -6,6 +6,7 @@ import { nextTick } from 'vue'
 import { handleSubmit, sleep } from '@/test'
 import Combobox from './story/_Combobox.vue'
 import ComboboxObject from './story/_ComboboxObject.vue'
+import ComboboxTagsInput from './story/_ComboboxTagsInput.vue'
 
 describe('given default Combobox', () => {
   let wrapper: VueWrapper<InstanceType<typeof Combobox>>
@@ -403,3 +404,57 @@ describe('given combobox in a form', async () => {
     })
   })
 })
+
+describe('given Combobox with TagsInput and addOnBlur', () => {
+  let wrapper: VueWrapper<InstanceType<typeof ComboboxTagsInput>>
+  let input: DOMWrapper<HTMLInputElement>
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(ComboboxTagsInput, {
+      props: { addOnBlur: true },
+      attachTo: document.body,
+    })
+    input = wrapper.find('input')
+  })
+
+  it('should select the combobox item instead of adding raw input text as tag', async () => {
+    // Focus input and type "a" to filter
+    input.element.focus()
+    await input.setValue('a')
+    await nextTick()
+
+    // Simulate the blur that happens when clicking an option (jsdom doesn't do this automatically)
+    const option = wrapper.find('[role=option]')
+    expect(option.text()).toContain('Apple')
+
+    // In a real browser: mousedown on option → input blurs → click fires
+    await input.trigger('blur', { relatedTarget: option.element })
+    await option.trigger('click')
+    await nextTick()
+
+    // "Apple" should be added as tag, NOT the raw text "a"
+    const tags = wrapper.findAll('[data-reka-collection-item]')
+    const tagTexts = tags.map(t => t.text())
+    expect(tagTexts).toContain('Apple')
+    expect(tagTexts).not.toContain('a')
+  })
+
+  it('should refocus input after selecting in multiple mode', async () => {
+    // Focus input and open dropdown
+    input.element.focus()
+    await input.setValue('a')
+    await nextTick()
+
+    const option = wrapper.find('[role=option]')
+
+    // In a real browser, mousedown on option blurs the input.
+    // Simulate this: blur the input, then click the option.
+    input.element.blur()
+    await option.trigger('click')
+    await nextTick()
+
+    // Input should be refocused so subsequent blur can trigger addOnBlur
+    expect(document.activeElement).toBe(input.element)
+  })
+})
diff --git a/packages/core/src/Combobox/ComboboxItem.vue b/packages/core/src/Combobox/ComboboxItem.vue
@@ -91,6 +91,9 @@ onUnmounted(() => {
         rootContext.onOpenChange(false)
         rootContext.modelValue.value = props.value
       }
+      else if (rootContext.multiple.value) {
+        rootContext.inputElement.value?.focus()
+      }
     }"
   >
     <slot>{{ value }}</slot>
diff --git a/packages/core/src/Combobox/story/_ComboboxTagsInput.vue b/packages/core/src/Combobox/story/_ComboboxTagsInput.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useFilter } from '@/shared'
+import { TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputRoot } from '@/TagsInput'
+import { ComboboxAnchor, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxRoot, ComboboxViewport } from '..'
+
+const props = withDefaults(defineProps<{
+  addOnBlur?: boolean
+}>(), {
+  addOnBlur: false,
+})
+
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const query = ref('')
+const values = ref<string[]>([])
+const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
+
+const filteredOptions = computed(() => options.filter(option => contains(option, query.value) && !values.value.includes(option)))
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model="values"
+    multiple
+  >
+    <ComboboxAnchor>
+      <TagsInputRoot
+        v-slot="{ modelValue: tags }"
+        v-model="values"
+        :add-on-blur="props.addOnBlur"
+        delimiter=""
+      >
+        <TagsInputItem
+          v-for="(item, index) in tags"
+          :key="index"
+          :value="item"
+        >
+          <TagsInputItemText />
+        </TagsInputItem>
+
+        <ComboboxInput
+          v-model="query"
+          as-child
+        >
+          <TagsInputInput
+            placeholder="Fruits..."
+            @keydown.enter.prevent
+          />
+        </ComboboxInput>
+      </TagsInputRoot>
+    </ComboboxAnchor>
+    <ComboboxContent>
+      <ComboboxViewport>
+        <ComboboxGroup>
+          <ComboboxItem
+            v-for="(option, index) in filteredOptions"
+            :key="index"
+            :value="option"
+          >
+            <span>{{ option }}</span>
+          </ComboboxItem>
+        </ComboboxGroup>
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>
diff --git a/packages/core/src/TagsInput/TagsInputInput.vue b/packages/core/src/TagsInput/TagsInputInput.vue
@@ -24,13 +24,22 @@ const props = withDefaults(defineProps<TagsInputInputProps>(), {
 const context = injectTagsInputRootContext()
 const { forwardRef, currentElement } = useForwardExpose()
 
-function handleBlur(event: Event) {
+function handleBlur(event: FocusEvent) {
   context.selectedElement.value = undefined
 
   if (!context.addOnBlur.value)
     return
 
   const target = event.target as HTMLInputElement
+
+  // If the blur is caused by clicking an option within the content,
+  // we don't trigger the `addOnBlur` action,
+  // because the clicked option should be added instead of the input's current value.
+  const relatedTarget = event.relatedTarget as HTMLElement | null
+  const controlledId = target.getAttribute('aria-controls')
+  if (controlledId && relatedTarget?.closest(`#${CSS.escape(controlledId)}`))
+    return
+
   if (!target.value)
     return
 

Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,9 @@ onUnmounted(() => {`
`91`	`91`	`rootContext.onOpenChange(false)`
`92`	`92`	`rootContext.modelValue.value = props.value`
`93`	`93`	`}`
	`94`	`+ else if (rootContext.multiple.value) {`
	`95`	`+ rootContext.inputElement.value?.focus()`
	`96`	`+ }`
`94`	`97`	`}"`
`95`	`98`	`>`
`96`	`99`	`<slot>{{ value }}</slot>`