From 832b88249c6afc59416304dceeb573865f79249a Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Sun, 24 Apr 2022 18:29:38 +0200
Subject: [PATCH] feat: stop event propagation when key handled (#5091)

* feat: stop event propagation when key handled

* don't handle s/g shortcuts if cmd/ctrl/alt pressed
---
 src/actions/manager.tsx |  1 +
 src/components/App.tsx  | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/actions/manager.tsx b/src/actions/manager.tsx
index 434a3849..7481d56a 100644
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@@ -117,6 +117,7 @@ export class ActionManager {
     trackAction(action, "keyboard", appState, elements, this.app, null);
 
     event.preventDefault();
+    event.stopPropagation();
     this.updater(data[0].perform(elements, appState, value, this.app));
     return true;
   }
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 38520fc4..a5c6ddff 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1272,6 +1272,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     this.cutAll();
     event.preventDefault();
+    event.stopPropagation();
   });
 
   private onCopy = withBatchedUpdates((event: ClipboardEvent) => {
@@ -1283,6 +1284,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     this.copyAll();
     event.preventDefault();
+    event.stopPropagation();
   });
 
   private cutAll = () => {
@@ -1874,8 +1876,10 @@ class App extends React.Component<AppProps, AppState> {
             );
           }
           this.setActiveTool({ ...this.state.activeTool, type: shape });
+          event.stopPropagation();
         } else if (event.key === KEYS.Q) {
           this.toggleLock("keyboard");
+          event.stopPropagation();
         }
       }
       if (event.key === KEYS.SPACE && gesture.pointers.size === 0) {
@@ -1884,7 +1888,11 @@ class App extends React.Component<AppProps, AppState> {
         event.preventDefault();
       }
 
-      if (event.key === KEYS.G || event.key === KEYS.S) {
+      if (
+        (event.key === KEYS.G || event.key === KEYS.S) &&
+        !event.altKey &&
+        !event[KEYS.CTRL_OR_CMD]
+      ) {
         const selectedElements = getSelectedElements(
           this.scene.getElements(),
           this.state,
@@ -1902,9 +1910,11 @@ class App extends React.Component<AppProps, AppState> {
             selectedElements.some((element) => hasBackground(element.type)))
         ) {
           this.setState({ openPopup: "backgroundColorPicker" });
+          event.stopPropagation();
         }
         if (event.key === KEYS.S) {
           this.setState({ openPopup: "strokeColorPicker" });
+          event.stopPropagation();
         }
       }
     },