From fd48c2cf792ae11f67ded2503620edce419e4598 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Fri, 17 Jun 2022 12:37:11 +0200
Subject: [PATCH] fix: non-letter shortcuts being swallowed by color picker
 (#5316)

---
 src/components/App.tsx         |  4 +++-
 src/components/ColorPicker.tsx | 22 +++++++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 8cf5f522..c5d0124b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1694,7 +1694,9 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
-        (isWritableElement(event.target) && event.key !== KEYS.ESCAPE) ||
+        (isWritableElement(event.target) &&
+          !event[KEYS.CTRL_OR_CMD] &&
+          event.key !== KEYS.ESCAPE) ||
         // case: using arrows to move between buttons
         (isArrowKey(event.key) && isInputLike(event.target))
       ) {
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index c70e81ba..fd284752 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -128,7 +128,9 @@ const Picker = ({
   }, []);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
+    let handled = false;
     if (event.key === KEYS.TAB) {
+      handled = true;
       const { activeElement } = document;
       if (event.shiftKey) {
         if (activeElement === firstItem.current) {
@@ -140,19 +142,19 @@ const Picker = ({
         event.preventDefault();
       }
     } else if (isArrowKey(event.key)) {
+      handled = true;
       const { activeElement } = document;
       const isRTL = getLanguage().rtl;
       let isCustom = false;
       let index = Array.prototype.indexOf.call(
-        gallery.current!.querySelector(".color-picker-content--default")!
-          .children,
+        gallery.current!.querySelector(".color-picker-content--default")
+          ?.children,
         activeElement,
       );
       if (index === -1) {
         index = Array.prototype.indexOf.call(
-          gallery.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!.children,
+          gallery.current!.querySelector(".color-picker-content--canvas-colors")
+            ?.children,
           activeElement,
         );
         if (index !== -1) {
@@ -180,8 +182,11 @@ const Picker = ({
       event.preventDefault();
     } else if (
       keyBindings.includes(event.key.toLowerCase()) &&
+      !event[KEYS.CTRL_OR_CMD] &&
+      !event.altKey &&
       !isWritableElement(event.target)
     ) {
+      handled = true;
       const index = keyBindings.indexOf(event.key.toLowerCase());
       const isCustom = index >= MAX_DEFAULT_COLORS;
       const parentElement = isCustom
@@ -196,11 +201,14 @@ const Picker = ({
 
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+      handled = true;
       event.preventDefault();
       onClose();
     }
-    event.nativeEvent.stopImmediatePropagation();
-    event.stopPropagation();
+    if (handled) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    }
   };
 
   const renderColors = (colors: Array<string>, custom: boolean = false) => {