fix(Combobox): keep content open when interacting with associated label (#2686)

benjamincanac · zernonia · claude · web-flow · commit ed7531bf808a · 2026-06-10T15:25:51.000+08:00
* fix(Combobox): keep content open when interacting with associated label

A `&lt;label&gt;` tied (via `for`) to a control inside the combobox forwards its
click/focus to that control. Without accounting for this, clicking such a
label while open dismissed the content on `pointerdown`, then the forwarded
click/focus immediately re-opened it.

* test(Combobox): wait for async dismiss in associated-label test

The 'stays open' assertion ran after a single nextTick, but a real dismiss
is emitted after an internal nextTick too — so the test could pass even if
the fix failed to prevent dismiss. Match the wait used in the dismiss test
to actually guard against that regression.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/core/src/Combobox/Combobox.test.ts b/packages/core/src/Combobox/Combobox.test.ts
@@ -349,6 +349,68 @@ describe('given a Combobox with openOnFocus', () => {
   })
 })
 
+describe('given combobox with an associated label', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Combobox>>
+
+  window.HTMLElement.prototype.releasePointerCapture = vi.fn()
+  window.HTMLElement.prototype.hasPointerCapture = vi.fn()
+  window.HTMLElement.prototype.scrollIntoView = vi.fn()
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(Combobox, { attachTo: document.body })
+  })
+
+  it('should not dismiss when interacting with a label tied to a control inside', async () => {
+    // A `<label for="...">` pointing to the combobox input forwards its click/focus
+    // to that input. Clicking it should keep the content open instead of dismissing
+    // on `pointerdown` and immediately re-opening from the forwarded click.
+    const input = wrapper.find('input')
+    input.element.id = 'combobox-input'
+
+    const label = document.createElement('label')
+    label.setAttribute('for', 'combobox-input')
+    label.textContent = 'Fruit'
+    document.body.appendChild(label)
+
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    // The document `pointerdown` listener is registered via `setTimeout(0)`.
+    await sleep(1)
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    label.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    // Wait as long as a real dismiss would take (emitted after an internal
+    // `await nextTick()`) so a regression that fails to prevent it is caught.
+    await sleep(1)
+    await nextTick()
+
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    label.remove()
+  })
+
+  it('should dismiss when interacting with an unrelated label', async () => {
+    const externalLabel = document.createElement('label')
+    externalLabel.textContent = 'Unrelated'
+    document.body.appendChild(externalLabel)
+
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    await sleep(1)
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    externalLabel.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    // dismiss is emitted after an internal `await nextTick()`.
+    await sleep(1)
+    await nextTick()
+
+    expect(wrapper.find('[role=group]').exists()).toBe(false)
+
+    externalLabel.remove()
+  })
+})
+
 describe('given combobox in a form', async () => {
   let wrapper: VueWrapper<InstanceType<any>>
   let valueBox: DOMWrapper<HTMLInputElement>
diff --git a/packages/core/src/Combobox/ComboboxContentImpl.vue b/packages/core/src/Combobox/ComboboxContentImpl.vue
@@ -97,6 +97,19 @@ onUnmounted(() => {
     rootContext.triggerElement.value?.focus()
   }
 })
+
+function isEventTargetWithinCombobox(target: EventTarget | null) {
+  if (rootContext.parentElement.value?.contains(target as Node))
+    return true
+
+  // A `<label>` associated (via `for`) with an element inside the combobox forwards its
+  // click/focus to that control, so interacting with it should not dismiss the content.
+  // Without this, clicking such a label while open dismisses on `pointerdown` and the
+  // forwarded click/focus immediately re-opens it.
+  const label = target instanceof Element ? target.closest('label') : null
+  const control = label?.control
+  return !!control && !!rootContext.parentElement.value?.contains(control)
+}
 </script>
 
 <template>
@@ -111,15 +124,15 @@ onUnmounted(() => {
         :disable-outside-pointer-events="disableOutsidePointerEvents"
         @dismiss="rootContext.onOpenChange(false)"
         @focus-outside="(ev) => {
-          // if clicking inside the combobox, prevent dismiss
-          if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+          // if focusing inside the combobox (or a label tied to it), prevent dismiss
+          if (isEventTargetWithinCombobox(ev.target)) ev.preventDefault()
           emits('focusOutside', ev)
         }"
         @interact-outside="emits('interactOutside', $event)"
         @escape-key-down="emits('escapeKeyDown', $event)"
         @pointer-down-outside="(ev) => {
-          // if clicking inside the combobox, prevent dismiss
-          if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+          // if clicking inside the combobox (or a label tied to it), prevent dismiss
+          if (isEventTargetWithinCombobox(ev.target)) ev.preventDefault()
           emits('pointerDownOutside', ev)
         }"
       >
