From 66ca095706b6a146a7f9f0a356c869e1870c9a4b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 6 Jul 2020 10:41:35 +0100
Subject: [PATCH] Fix double handling of native inputs wrapped for aria menus

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/ContextMenu.js | 46 ++++++++++++++++--------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/structures/ContextMenu.js b/src/components/structures/ContextMenu.js
index 157b3e1be3..bda194ddd0 100644
--- a/src/components/structures/ContextMenu.js
+++ b/src/components/structures/ContextMenu.js
@@ -425,17 +425,25 @@ MenuItemCheckbox.propTypes = {
 
 // Semantic component for representing a styled role=menuitemcheckbox
 export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, checked, disabled=false, ...props}) => {
-    const onKeyDown = (ev) => {
-        // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
-        if (ev.key === Key.ENTER || ev.key === Key.SPACE) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            onChange(ev);
-            if (ev.key === Key.ENTER) {
+    const onKeyDown = (e) => {
+        if (e.key === Key.ENTER || e.key === Key.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+            onChange();
+            // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+            if (e.key === Key.ENTER) {
                 onClose();
             }
         }
     };
+    const onKeyUp = (e) => {
+        // prevent the input default handler as we handle it on keydown to match
+        // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
+        if (e.key === Key.SPACE || e.key === Key.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
     return (
         <StyledCheckbox
             {...props}
@@ -447,6 +455,7 @@ export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, chec
             aria-label={label}
             onChange={onChange}
             onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
         >
             { children }
         </StyledCheckbox>
@@ -482,17 +491,25 @@ MenuItemRadio.propTypes = {
 
 // Semantic component for representing a styled role=menuitemradio
 export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked=false, disabled=false, ...props}) => {
-    const onKeyDown = (ev) => {
-        // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
-        if (ev.key === Key.ENTER || ev.key === Key.SPACE) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            onChange(ev);
-            if (ev.key === Key.ENTER) {
+    const onKeyDown = (e) => {
+        if (e.key === Key.ENTER || e.key === Key.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+            onChange();
+            // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+            if (e.key === Key.ENTER) {
                 onClose();
             }
         }
     };
+    const onKeyUp = (e) => {
+        // prevent the input default handler as we handle it on keydown to match
+        // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
+        if (e.key === Key.SPACE || e.key === Key.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
     return (
         <StyledRadioButton
             {...props}
@@ -504,6 +521,7 @@ export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked
             aria-label={label}
             onChange={onChange}
             onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
         >
             { children }
         </StyledRadioButton>