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

@@ -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;
   }

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();
         }
       }
     },