Change wrap behavior to clear focus instead

Author: muan

src/index.ts

@@ -59,6 +59,13 @@ export default class Combobox {
     const focusEl = Array.from(this.list.querySelectorAll<HTMLElement>('[aria-selected="true"]')).filter(visible)[0]
     const els = Array.from(this.list.querySelectorAll<HTMLElement>('[role="option"]')).filter(visible)
     const focusIndex = els.indexOf(focusEl)
+
+    if ((focusIndex === els.length - 1 && indexDiff === 1) || (focusIndex === 0 && indexDiff === -1)) {
+      this.clearSelection()
+      this.input.focus()
+      return
+    }
+
     let indexOfItem = indexDiff === 1 ? 0 : els.length - 1
     if (focusEl && focusIndex >= 0) {
       const newIndex = focusIndex + indexDiff

test/test.js

@@ -115,13 +115,20 @@ describe('combobox-nav', function() {
       click(document.getElementById('wall-e'))
 
       press(input, 'ArrowDown')
+      assert.equal(options[5].getAttribute('aria-selected'), 'true')
+      assert.equal(input.getAttribute('aria-activedescendant'), 'link')
+
+      press(input, 'ArrowDown')
+      assert(!list.querySelector('[aria-selected=true]'), 'Nothing should be selected')
+      assert(!input.hasAttribute('aria-activedescendant'), 'Nothing should be selected')
+
       press(input, 'ArrowDown')
       assert.equal(options[0].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'baymax')
 
       press(input, 'ArrowUp')
-      assert.equal(options[5].getAttribute('aria-selected'), 'true')
-      assert.equal(input.getAttribute('aria-activedescendant'), 'link')
+      assert(!list.querySelector('[aria-selected=true]'), 'Nothing should be selected')
+      assert(!input.hasAttribute('aria-activedescendant'), 'Nothing should be selected')
 
       press(input, 'ArrowDown')
       press(input, 'ArrowDown')