Merge branch 'main' into scroll-into-view

Author: keithamus

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:

src/index.ts

@@ -110,7 +110,9 @@ export default class Combobox {
       if (target === el) {
         this.input.setAttribute('aria-activedescendant', target.id)
         target.setAttribute('aria-selected', 'true')
+        fireSelectEvent(target)
         target.scrollIntoView(this.scrollIntoViewOptions)
+        scrollTo(this.list, target)
       } else {
         el.removeAttribute('aria-selected')
       }
@@ -191,6 +193,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 Event('combobox-select', {bubbles: true}))
+}
+
 function visible(el: HTMLElement): boolean {
   return (
     !el.hidden &&

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')