From c906521417d8371a2796a064c45cc298dfa1e1c1 Mon Sep 17 00:00:00 2001
From: Mu-An Chiou <me@muanchiou.com>
Date: Fri, 11 Jan 2019 16:25:44 -0500
Subject: [PATCH 1/3] Add test for clicking on disabled item

---
 test/test.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/test/test.js b/test/test.js
index bbf681c..71945ee 100644
--- a/test/test.js
+++ b/test/test.js
@@ -2,6 +2,10 @@ function press(input, key, ctrlKey) {
   input.dispatchEvent(new KeyboardEvent('keydown', {key, ctrlKey}))
 }
 
+function click(element) {
+  element.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+}
+
 describe('combobox-nav', function() {
   describe('with API', function() {
     beforeEach(function() {
@@ -84,6 +88,7 @@ describe('combobox-nav', function() {
       assert.equal(options[4].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'wall-e')
       press(input, 'Enter')
+      click(options[4])
 
       press(input, 'p', true)
       assert.equal(options[3].getAttribute('aria-selected'), 'true')
@@ -107,9 +112,9 @@ describe('combobox-nav', function() {
         expectedTargets.push(target.id)
       })
 
-      options[2].dispatchEvent(new MouseEvent('click', {bubbles: true}))
-      options[1].dispatchEvent(new MouseEvent('click', {bubbles: true}))
-      options[0].dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      click(options[2])
+      click(options[1])
+      click(options[0])
 
       assert.equal(expectedTargets.length, 2)
       assert.equal(expectedTargets[0], 'hubot')

From bd787e00a9b53631a92e899e81dd43e8ad7eef94 Mon Sep 17 00:00:00 2001
From: Mu-An Chiou <me@muanchiou.com>
Date: Fri, 11 Jan 2019 16:32:48 -0500
Subject: [PATCH 2/3] Add disable item to demo

---
 examples/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index acbcc7a..a5a8b70 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -15,7 +15,7 @@
     </label>
     <ul role="listbox" id="list-id">
       <li id="baymax" role="option">Baymax</li>
-      <li><del>BB-8</del></li>
+      <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>
     </ul>

From aef3213e992e9f8a46058cd43d227592108f9b68 Mon Sep 17 00:00:00 2001
From: Mu-An Chiou <me@muanchiou.com>
Date: Fri, 11 Jan 2019 16:33:41 -0500
Subject: [PATCH 3/3] Prevent  commit if item is disabled preventDefault if
 selection exist but is disabled like how button[disabled] would behave

---
 combobox-nav.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/combobox-nav.js b/combobox-nav.js
index 58655c3..e417bef 100644
--- a/combobox-nav.js
+++ b/combobox-nav.js
@@ -63,13 +63,15 @@ function commitWithElement(event: MouseEvent) {
   if (!(event.target instanceof Element)) return
   const target = event.target.closest('[role="option"]')
   if (!target) return
-  fireCommitEvent(target)
   event.preventDefault()
+  if (target.getAttribute('aria-disabled') === 'true') return
+  fireCommitEvent(target)
 }
 
 function commit(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): boolean {
   const target = list.querySelector('[aria-selected="true"]')
-  if (!target || target.getAttribute('aria-disabled') === 'true') return false
+  if (!target) return false
+  if (target.getAttribute('aria-disabled') === 'true') return true
   fireCommitEvent(target)
   return true
 }