From 1b466525e4e83301c93831470aca8206e5f285eb Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 31 May 2023 15:39:37 +0100
Subject: [PATCH] use default option in combobox

---
 src/autocomplete.ts | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/autocomplete.ts b/src/autocomplete.ts
index 1edd4d7..89dacde 100644
--- a/src/autocomplete.ts
+++ b/src/autocomplete.ts
@@ -27,7 +27,9 @@ export default class Autocomplete {
     this.container = container
     this.input = input
     this.results = results
-    this.combobox = new Combobox(input, results)
+    this.combobox = new Combobox(input, results, {
+      defaultFirstOption: autoselectEnabled,
+    })
     this.feedback = (container.getRootNode() as Document).getElementById(`${this.results.id}-feedback`)
     this.autoselectEnabled = autoselectEnabled
     this.clearButton = (container.getRootNode() as Document).getElementById(`${this.input.id || this.input.name}-clear`)
@@ -108,17 +110,6 @@ export default class Autocomplete {
   }
 
   onKeydown(event: KeyboardEvent): void {
-    // if autoselect is enabled, Enter key will select the first option
-    if (event.key === 'Enter' && this.container.open && this.autoselectEnabled) {
-      const firstOption = this.results.children[0]
-      if (firstOption) {
-        event.stopPropagation()
-        event.preventDefault()
-
-        this.onCommit({target: firstOption})
-      }
-    }
-
     if (event.key === 'Escape' && this.container.open) {
       this.container.open = false
       event.stopPropagation()
@@ -212,6 +203,7 @@ export default class Autocomplete {
         // eslint-disable-next-line github/no-inner-html
         this.results.innerHTML = html as string
         this.identifyOptions()
+        this.combobox.indicateDefaultOption()
         const allNewOptions = this.results.querySelectorAll('[role="option"]')
         const hasResults = !!allNewOptions.length
         const numOptions = allNewOptions.length