Merge pull request #7 from github/clicky

Fix a[href] as option not navigating

Author: muan

combobox-nav.js

@@ -63,7 +63,6 @@ function commitWithElement(event: MouseEvent) {
   if (!(event.target instanceof Element)) return
   const target = event.target.closest('[role="option"]')
   if (!target) return
-  event.preventDefault()
   if (target.getAttribute('aria-disabled') === 'true') return
   fireCommitEvent(target)
 }
@@ -72,7 +71,7 @@ function commit(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement
   const target = list.querySelector('[aria-selected="true"]')
   if (!target) return false
   if (target.getAttribute('aria-disabled') === 'true') return true
-  fireCommitEvent(target)
+  target.click()
   return true
 }
 

examples/index.html

@@ -18,6 +18,7 @@
       <li id="bb-8" role="option" aria-disabled="true"><del>BB-8</del></li>
       <li id="hubot" role="option">Hubot</li>
       <li id="r2-d2" role="option">R2-D2</li>
+      <li id="wall-e"><a href="#wall-e" role="option">Wall-E</a></li>
     </ul>
   </form>
   <pre class="events"></pre>

test/test.js

@@ -3,7 +3,7 @@ function press(input, key, ctrlKey) {
 }
 
 function click(element) {
-  element.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+  element.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}))
 }
 
 describe('combobox-nav', function() {
@@ -51,6 +51,7 @@ describe('combobox-nav', function() {
           <li id="hubot" role="option">Hubot</li>
           <li id="r2-d2" role="option">R2-D2</li>
           <li id="wall-e" role="option" aria-disabled="true">Wall-E</li>
+          <li><a href="#wall-e" role="option">Wall-E</a></li>
         </ul>
       `
       comboboxNav.install(document.querySelector('input'), document.querySelector('ul'))
@@ -120,5 +121,16 @@ describe('combobox-nav', function() {
       assert.equal(expectedTargets[0], 'hubot')
       assert.equal(expectedTargets[1], 'baymax')
     })
+
+    it('fires event and follows the link on click', function() {
+      let eventFired = false
+      document.addEventListener('combobox-commit', function() {
+        eventFired = true
+      })
+
+      click(document.querySelectorAll('[role=option]')[4])
+      assert(eventFired)
+      assert.equal(window.location.hash, '#wall-e')
+    })
   })
 })