Merge pull request #40 from github/composition

muan · web-flow · commit b1bb4fe95e31 · 2019-11-15T14:11:14.000-08:00
Prevent keyboard events during text composition inside of details-menu
diff --git a/index.js b/index.js
@@ -38,6 +38,8 @@ class DetailsMenuElement extends HTMLElement {
     }
 
     const subscriptions = [
+      fromEvent(details, 'compositionstart', e => trackComposition(this, e)),
+      fromEvent(details, 'compositionend', e => trackComposition(this, e)),
       fromEvent(details, 'click', e => shouldCommit(details, this, e)),
       fromEvent(details, 'change', e => shouldCommit(details, this, e)),
       fromEvent(details, 'keydown', e => keydown(details, this, e)),
@@ -49,7 +51,7 @@ class DetailsMenuElement extends HTMLElement {
       ...focusOnOpen(details)
     ]
 
-    states.set(this, {subscriptions, loaded: false})
+    states.set(this, {subscriptions, loaded: false, isComposing: false})
   }
 
   disconnectedCallback() {
@@ -214,10 +216,12 @@ function commit(selected: Element, details: Element) {
 
 function keydown(details: Element, menu: DetailsMenuElement, event: Event) {
   if (!(event instanceof KeyboardEvent)) return
-  const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY'
-
   // Ignore key presses from nested details.
   if (details.querySelector('details[open]')) return
+  const state = states.get(menu)
+  if (!state || state.isComposing) return
+
+  const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY'
 
   switch (event.key) {
     case 'Escape':
@@ -318,6 +322,12 @@ function labelHTML(el: ?Element): ?string {
   return contentsEl ? contentsEl.innerHTML : null
 }
 
+function trackComposition(menu, event: Event) {
+  const state = states.get(menu)
+  if (!state) return
+  state.isComposing = event.type === 'compositionstart'
+}
+
 export default DetailsMenuElement
 
 if (!window.customElements.get('details-menu')) {
