From ee64a7e264723bf695a84ea7509d469f89cd5af2 Mon Sep 17 00:00:00 2001
From: Jakub Koralewski <jakub.koralewski1@gmail.com>
Date: Sun, 4 Jul 2021 22:27:33 +0200
Subject: [PATCH] fix: ensure `s` and `g` shortcuts work on no selection
 (#3800)

Co-authored-by: dwelle <luzar.david@gmail.com>
---
 src/components/App.tsx | 28 +++++++++++++++++-----------
 src/shapes.tsx         |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 4c053d1d..07e14046 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -156,6 +156,7 @@ import {
   getElementsWithinSelection,
   getNormalizedZoom,
   getSelectedElements,
+  hasBackground,
   isOverScrollBars,
   isSomeElementSelected,
 } from "../scene";
@@ -1582,17 +1583,22 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (event.key === KEYS.G || event.key === KEYS.S) {
-        const selectedElements = getSelectedElements(
-          this.scene.getElements(),
-          this.state,
-        );
-        if (selectedElements.length) {
-          if (event.key === KEYS.G) {
-            this.setState({ openPopup: "backgroundColorPicker" });
-          }
-          if (event.key === KEYS.S) {
-            this.setState({ openPopup: "strokeColorPicker" });
-          }
+        if (this.state.elementType === "selection") {
+          return;
+        }
+
+        if (
+          event.key === KEYS.G &&
+          (hasBackground(this.state.elementType) ||
+            getSelectedElements(
+              this.scene.getElements(),
+              this.state,
+            ).some((element) => hasBackground(element.type)))
+        ) {
+          this.setState({ openPopup: "backgroundColorPicker" });
+        }
+        if (event.key === KEYS.S) {
+          this.setState({ openPopup: "strokeColorPicker" });
         }
       }
     },
diff --git a/src/shapes.tsx b/src/shapes.tsx
index ec706872..a1fffc7f 100644
--- a/src/shapes.tsx
+++ b/src/shapes.tsx
@@ -11,7 +11,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "selection",
-    key: [KEYS.V, KEYS.S],
+    key: KEYS.V,
   },
   {
     icon: (