From 786b87fff46183fed2f6808291e205c2b1d81025 Mon Sep 17 00:00:00 2001
From: Sean Arackal <sean.arackal@gmail.com>
Date: Tue, 22 Sep 2026 01:54:21 -0400
Subject: [PATCH] Fix dropdown closing after input blur

---
 src/autocomplete.ts           |  2 +-
 test/auto-complete-element.js | 51 +++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/autocomplete.ts b/src/autocomplete.ts
index 9072274..8354d04 100644
--- a/src/autocomplete.ts
+++ b/src/autocomplete.ts
@@ -247,7 +247,7 @@ export default class Autocomplete {
       }
     }
     this.container.open = true
-    this.interactingWithList = true
+    this.interactingWithList = false
   }
 
   close(): void {
diff --git a/test/auto-complete-element.js b/test/auto-complete-element.js
index 87cdcea..56793a0 100644
--- a/test/auto-complete-element.js
+++ b/test/auto-complete-element.js
@@ -196,6 +196,57 @@ describe('auto-complete element', function () {
       if (!popup.popover) assert.isFalse(popup.hidden)
     })
 
+    it('closes when focus moves away after opening results', async function () {
+      const container = document.querySelector('auto-complete')
+      const input = container.querySelector('input')
+      const nextInput = document.createElement('input')
+      document.body.append(nextInput)
+
+      input.focus()
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+      assert.isTrue(container.open)
+
+      nextInput.focus()
+      assert.isFalse(container.open)
+    })
+
+    it('closes when a click moves focus away after opening results', async function () {
+      const container = document.querySelector('auto-complete')
+      const input = container.querySelector('input')
+      const outsideButton = document.createElement('button')
+      outsideButton.addEventListener('click', () => outsideButton.focus())
+      document.body.append(outsideButton)
+
+      input.focus()
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+      assert.isTrue(container.open)
+
+      outsideButton.click()
+      assert.isFalse(container.open)
+    })
+
+    it('keeps results open while an option is being selected', async function () {
+      const container = document.querySelector('auto-complete')
+      const input = container.querySelector('input')
+      const popup = container.querySelector('#popup')
+      const nextInput = document.createElement('input')
+      document.body.append(nextInput)
+
+      input.focus()
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+      const option = popup.querySelector('[role="option"]')
+      option.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+      nextInput.focus()
+      assert.isTrue(container.open)
+
+      option.dispatchEvent(new CustomEvent('combobox-commit', {bubbles: true}))
+      assert.equal('first', container.value)
+      assert.isFalse(container.open)
+    })
+
     it('allows providing a custom fetch method', async () => {
       const container = document.querySelector('auto-complete')
       const input = container.querySelector('input')