Merge pull request #2 from github/composition

muan · web-flow · commit fa64025955ce · 2018-12-20T15:07:37.000-05:00
Fix keyboard event handling during composition
diff --git a/combobox-nav.js b/combobox-nav.js
@@ -1,30 +1,40 @@
 /* @flow strict */
 
 export function install(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): void {
+  input.addEventListener('compositionstart', trackComposition)
+  input.addEventListener('compositionend', trackComposition)
   input.addEventListener('keydown', keyboardBindings)
   list.addEventListener('click', commitWithElement)
 }
 
 export function uninstall(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): void {
   input.removeAttribute('aria-activedescendant')
+  input.removeEventListener('compositionstart', trackComposition)
+  input.removeEventListener('compositionend', trackComposition)
   input.removeEventListener('keydown', keyboardBindings)
   list.removeEventListener('click', commitWithElement)
 }
 
+let isComposing = false
 const ctrlBindings = !!navigator.userAgent.match(/Macintosh/)
 
 function keyboardBindings(event: KeyboardEvent) {
   if (event.shiftKey || event.metaKey || event.altKey) return
   const input = event.currentTarget
   if (!(input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement)) return
+  if (isComposing) return
   const list = document.getElementById(input.getAttribute('aria-owns') || '')
   if (!list) return
 
   switch (event.key) {
     case 'Enter':
     case 'Tab':
-      commit(input, list)
-      event.preventDefault()
+      if (commit(input, list)) {
+        event.preventDefault()
+      }
+      break
+    case 'Escape':
+      clearSelection(list)
       break
     case 'ArrowDown':
       navigate(input, list, 1)
@@ -57,10 +67,11 @@ function commitWithElement(event: MouseEvent) {
   event.preventDefault()
 }
 
-function commit(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): void {
+function commit(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): boolean {
   const target = list.querySelector('[aria-selected="true"]')
-  if (!target) return
+  if (!target) return false
   fireCommitEvent(target)
+  return true
 }
 
 function fireCommitEvent(target: Element): void {
@@ -96,3 +107,20 @@ export function navigate(
     }
   }
 }
+
+function clearSelection(list): void {
+  const target = list.querySelector('[aria-selected="true"]')
+  if (!target) return
+  target.setAttribute('aria-selected', 'false')
+}
+
+function trackComposition(event: Event): void {
+  const input = event.currentTarget
+  if (!(input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement)) return
+  isComposing = event.type === 'compositionstart'
+
+  const list = document.getElementById(input.getAttribute('aria-owns') || '')
+  if (!list) return
+
+  clearSelection(list)
+}
diff --git a/examples/index.html b/examples/index.html
@@ -8,16 +8,18 @@
   <style>[aria-selected="true"] { font-weight: bold; }</style>
 </head>
 <body>
-  <label>
-    Least favorite robot
-    <input aria-owns="list-id" role="combobox" type="text">
-  </label>
-  <ul role="listbox" id="list-id">
-    <li id="baymax" role="option">Baymax</li>
-    <li><del>BB-8</del></li>
-    <li id="hubot" role="option">Hubot</li>
-    <li id="r2-d2" role="option">R2-D2</li>
-  </ul>
+  <form>
+    <label>
+      Least favorite robot
+      <input aria-owns="list-id" role="combobox" type="text">
+    </label>
+    <ul role="listbox" id="list-id">
+      <li id="baymax" role="option">Baymax</li>
+      <li><del>BB-8</del></li>
+      <li id="hubot" role="option">Hubot</li>
+      <li id="r2-d2" role="option">R2-D2</li>
+    </ul>
+  </form>
   <pre class="events"></pre>
   <script type="text/javascript">
     comboboxNav.install(document.querySelector('input'), document.querySelector('ul'))
