From e4401286f370cae9fdd17a78c0850c776c180cfb Mon Sep 17 00:00:00 2001
From: Nico Wenterodt <nico@niwen.de>
Date: Thu, 14 Sep 2023 15:55:27 +0200
Subject: [PATCH 1/2] introduce combobox-select event

---
 README.md    | 10 ++++++++++
 src/index.ts |  5 +++++
 test/test.js | 15 +++++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/README.md b/README.md
index a9e8046..dde1a4f 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,16 @@ list.addEventListener('combobox-commit', function (event) {
 
 When a label is clicked on, `click` event is fired from both `<label>` and its associated input `label.control`. Since combobox does not know about the control, `combobox-commit` cannot be used as an indicator of the item's selection state.
 
+A bubbling `combobox-select` event is fired on the list element when an option is selected but not yet committed.
+
+For example, autocomplete when an option is selected but not yet committed:
+
+```js
+list.addEventListener('combobox-select', function (event) {
+  console.log('Element selected : ', event.target)
+})
+```
+
 ## Settings
 
 For advanced configuration, the constructor takes an optional third argument. For example:
diff --git a/src/index.ts b/src/index.ts
index 1f4d5f1..f18590f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -107,6 +107,7 @@ export default class Combobox {
       if (target === el) {
         this.input.setAttribute('aria-activedescendant', target.id)
         target.setAttribute('aria-selected', 'true')
+        fireSelectEvent(target)
         scrollTo(this.list, target)
       } else {
         el.removeAttribute('aria-selected')
@@ -188,6 +189,10 @@ function fireCommitEvent(target: Element, detail?: Record<string, unknown>): voi
   target.dispatchEvent(new CustomEvent('combobox-commit', {bubbles: true, detail}))
 }
 
+function fireSelectEvent(target: Element): void {
+  target.dispatchEvent(new CustomEvent('combobox-select', {bubbles: true}))
+}
+
 function visible(el: HTMLElement): boolean {
   return (
     !el.hidden &&
diff --git a/test/test.js b/test/test.js
index 2f6593d..03a82c5 100644
--- a/test/test.js
+++ b/test/test.js
@@ -164,6 +164,21 @@ describe('combobox-nav', function () {
       assert.equal(expectedTargets[1], 'baymax')
     })
 
+    it('fires select events on navigating', function () {
+      const expectedTargets = []
+
+      document.addEventListener('combobox-select', function ({target}) {
+        expectedTargets.push(target.id)
+      })
+
+      press(input, 'ArrowDown')
+      press(input, 'ArrowDown')
+
+      assert.equal(expectedTargets.length, 2)
+      assert.equal(expectedTargets[0], 'baymax')
+      assert.equal(expectedTargets[1], 'hubot')
+    })
+
     it('clear selection on input operation', function () {
       press(input, 'ArrowDown')
       assert.equal(options[0].getAttribute('aria-selected'), 'true')

From da9f67317b6ed31cfd55fa6208188ce596c0c062 Mon Sep 17 00:00:00 2001
From: Nico Wenterodt <nico@niwen.de>
Date: Thu, 14 Sep 2023 18:25:29 +0200
Subject: [PATCH 2/2] use Event instead of CustomEvent

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index f18590f..61a94c8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -190,7 +190,7 @@ function fireCommitEvent(target: Element, detail?: Record<string, unknown>): voi
 }
 
 function fireSelectEvent(target: Element): void {
-  target.dispatchEvent(new CustomEvent('combobox-select', {bubbles: true}))
+  target.dispatchEvent(new Event('combobox-select', {bubbles: true}))
 }
 
 function visible(el: HTMLElement): boolean {