fix(Combobox): defer handleBlur close to let FocusScope restore focus (#2663)

benjamincanac · web-flow · commit 7e13d0a58d10 · 2026-05-29T12:08:35.000+08:00
When two ComboboxRoot instances are on the same page, clicking the second's
trigger while the first is open causes the second to open briefly then
immediately close. This happens because handleBlur fires before FocusScope's
focus-restoration mechanism can pull focus back inside.

Wrap handleBlur's close call in a requestAnimationFrame that re-checks
document.activeElement, giving FocusScope's handleFocusOut a chance to
restore focus first. If focus ends up back inside, the close is skipped.
diff --git a/packages/core/src/Combobox/Combobox.test.ts b/packages/core/src/Combobox/Combobox.test.ts
@@ -306,26 +306,47 @@ describe('given a Combobox with openOnFocus', () => {
   })
 
   it('should close content when focus moves to an element outside', async () => {
-    // Add an external focusable element
     const externalButton = document.createElement('button')
     externalButton.textContent = 'External'
     document.body.appendChild(externalButton)
 
     const input = wrapper.find('input')
 
-    // Focus input to open via openOnFocus
-    await input.trigger('focus')
+    input.element.focus()
     await nextTick()
     expect(wrapper.find('[role=group]').exists()).toBe(true)
 
-    // Simulate blur with relatedTarget pointing to external element
-    await input.trigger('blur', { relatedTarget: externalButton })
+    externalButton.focus()
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
     await nextTick()
 
     expect(wrapper.find('[role=group]').exists()).toBe(false)
 
     externalButton.remove()
   })
+
+  it('should not close when focus is restored inside before deferred close fires', async () => {
+    const externalButton = document.createElement('button')
+    externalButton.textContent = 'External'
+    document.body.appendChild(externalButton)
+
+    const input = wrapper.find('input')
+
+    input.element.focus()
+    await nextTick()
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    // Synthetic blur: fires handleBlur with relatedTarget outside,
+    // but doesn't change document.activeElement — simulates FocusScope
+    // restoring focus back inside before the deferred close callback runs
+    await input.trigger('blur', { relatedTarget: externalButton })
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+    await nextTick()
+
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    externalButton.remove()
+  })
 })
 
 describe('given combobox in a form', async () => {
@@ -458,3 +479,66 @@ describe('given Combobox with TagsInput and addOnBlur', () => {
     expect(document.activeElement).toBe(input.element)
   })
 })
+
+describe('given combobox handleBlur with deferred close', () => {
+  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, props: { resetSearchTermOnBlur: true } })
+  })
+
+  it('should not close when focus is restored inside before deferred close fires', async () => {
+    const externalButton = document.createElement('button')
+    externalButton.textContent = 'External'
+    document.body.appendChild(externalButton)
+
+    // Open combobox
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    const input = wrapper.find('input')
+    input.element.focus()
+
+    // Synthetic blur: fires handleBlur with relatedTarget outside,
+    // but doesn't change document.activeElement — simulates FocusScope
+    // restoring focus back inside before the deferred close callback runs
+    await input.trigger('blur', { relatedTarget: externalButton })
+
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+    await nextTick()
+
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    externalButton.remove()
+  })
+
+  it('should close when focus stays outside after rAF', async () => {
+    const externalButton = document.createElement('button')
+    externalButton.textContent = 'External'
+    document.body.appendChild(externalButton)
+
+    // Open combobox
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[role=group]').exists()).toBe(true)
+
+    const input = wrapper.find('input')
+    input.element.focus()
+
+    // Focus moves outside and stays there
+    externalButton.focus()
+
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+    await nextTick()
+
+    expect(wrapper.find('[role=group]').exists()).toBe(false)
+
+    externalButton.remove()
+  })
+})
diff --git a/packages/core/src/Combobox/ComboboxInput.vue b/packages/core/src/Combobox/ComboboxInput.vue
@@ -74,7 +74,19 @@ function handleBlur(ev: FocusEvent) {
   const isInsideContent = document.getElementById(rootContext.contentId)?.contains(nextFocus)
 
   if (!isInsideRoot && !isInsideContent) {
-    rootContext.onOpenChange(false)
+    // Delay to let FocusScope's focus-restoration (handleFocusOut) run first.
+    // Without this, closing fires before FocusScope can pull focus back inside,
+    // causing a second combobox to immediately close when switching between two.
+    requestAnimationFrame(() => {
+      if (!rootContext.open.value)
+        return
+      const active = document.activeElement
+      const isStillOutside = !rootContext.parentElement.value?.contains(active)
+        && !document.getElementById(rootContext.contentId)?.contains(active)
+      if (isStillOutside) {
+        rootContext.onOpenChange(false)
+      }
+    })
   }
 }
 
