fix: color pickers not opening on mobile (#3676)

src/actions/actionCanvas.tsx

@@ -34,9 +34,9 @@ export const actionChangeViewBackgroundColor = register({
           type="canvasBackground"
           color={appState.viewBackgroundColor}
           onChange={(color) => updateData({ viewBackgroundColor: color })}
-          isActive={appState.openMenu === "canvasColorPicker"}
+          isActive={appState.openPopup === "canvasColorPicker"}
           setActive={(active) =>
-            updateData({ openMenu: active ? "canvasColorPicker" : null })
+            updateData({ openPopup: active ? "canvasColorPicker" : null })
           }
           data-testid="canvas-background-picker"
         />

src/actions/actionProperties.tsx

@@ -126,9 +126,9 @@ export const actionChangeStrokeColor = register({
           appState.currentItemStrokeColor,
         )}
         onChange={(color) => updateData({ currentItemStrokeColor: color })}
-        isActive={appState.openMenu === "strokeColorPicker"}
+        isActive={appState.openPopup === "strokeColorPicker"}
         setActive={(active) =>
-          updateData({ openMenu: active ? "strokeColorPicker" : null })
+          updateData({ openPopup: active ? "strokeColorPicker" : null })
         }
       />
     </>
@@ -166,9 +166,9 @@ export const actionChangeBackgroundColor = register({
           appState.currentItemBackgroundColor,
         )}
         onChange={(color) => updateData({ currentItemBackgroundColor: color })}
-        isActive={appState.openMenu === "backgroundColorPicker"}
+        isActive={appState.openPopup === "backgroundColorPicker"}
         setActive={(active) =>
-          updateData({ openMenu: active ? "backgroundColorPicker" : null })
+          updateData({ openPopup: active ? "backgroundColorPicker" : null })
         }
       />
     </>

src/appState.ts

@@ -52,6 +52,7 @@ export const getDefaultAppState = (): Omit<
     multiElement: null,
     name: `${t("labels.untitled")}-${getDateTime()}`,
     openMenu: null,
+    openPopup: null,
     pasteDialog: { shown: false, data: null },
     previousSelectedElementIds: {},
     resizingElement: null,
@@ -131,6 +132,7 @@ const APP_STATE_STORAGE_CONF = (<
   offsetLeft: { browser: false, export: false },
   offsetTop: { browser: false, export: false },
   openMenu: { browser: true, export: false },
+  openPopup: { browser: false, export: false },
   pasteDialog: { browser: false, export: false },
   previousSelectedElementIds: { browser: true, export: false },
   resizingElement: { browser: false, export: false },

src/components/App.tsx

@@ -1651,10 +1651,10 @@ class App extends React.Component<AppProps, AppState> {
         );
         if (selectedElements.length) {
           if (event.key === KEYS.G) {
-            this.setState({ openMenu: "backgroundColorPicker" });
+            this.setState({ openPopup: "backgroundColorPicker" });
           }
           if (event.key === KEYS.S) {
-            this.setState({ openMenu: "strokeColorPicker" });
+            this.setState({ openPopup: "strokeColorPicker" });
           }
         }
       }

src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -43,6 +43,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -208,6 +209,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -519,6 +521,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -830,6 +833,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -995,6 +999,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -1193,6 +1198,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -1444,6 +1450,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -1772,7 +1779,8 @@ Object {
   "name": "Untitled-201933152653",
   "offsetLeft": 20,
   "offsetTop": 10,
-  "openMenu": "backgroundColorPicker",
+  "openMenu": null,
+  "openPopup": "backgroundColorPicker",
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -2504,6 +2512,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -2815,6 +2824,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -3126,6 +3136,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -3511,6 +3522,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -3768,6 +3780,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4100,6 +4113,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4200,6 +4214,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4278,6 +4293,7 @@ Object {
   "offsetLeft": 20,
   "offsetTop": 10,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -43,6 +43,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -510,6 +511,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -983,6 +985,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -1771,6 +1774,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -1977,6 +1981,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -2441,6 +2446,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -2696,6 +2702,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -2861,6 +2868,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -3307,7 +3315,8 @@ Object {
   "name": "Untitled-201933152653",
   "offsetLeft": 0,
   "offsetTop": 0,
-  "openMenu": "strokeColorPicker",
+  "openMenu": null,
+  "openPopup": "strokeColorPicker",
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -3547,6 +3556,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -3753,6 +3763,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4000,6 +4011,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4254,6 +4266,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4640,6 +4653,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -4937,6 +4951,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -5212,6 +5227,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -5421,6 +5437,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -5586,6 +5603,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -6045,6 +6063,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -6366,6 +6385,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -8422,6 +8442,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -8787,6 +8808,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -9042,6 +9064,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -9261,6 +9284,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -9543,6 +9567,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -9708,6 +9733,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -9873,6 +9899,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -10038,6 +10065,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -10233,6 +10261,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -10428,6 +10457,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -10635,6 +10665,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -10830,6 +10861,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -10995,6 +11027,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -11160,6 +11193,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -11355,6 +11389,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -11520,6 +11555,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -11727,6 +11763,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -12452,6 +12489,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -12707,6 +12745,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -12809,6 +12848,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -12909,6 +12949,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -13077,6 +13118,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -13401,6 +13443,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -13603,6 +13646,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -14437,6 +14481,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -14537,6 +14582,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -15304,6 +15350,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -15712,6 +15759,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -15987,6 +16035,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -16089,6 +16138,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -16591,6 +16641,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,
@@ -16691,6 +16742,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,

src/tests/packages/__snapshots__/utils.test.ts.snap

@@ -42,6 +42,7 @@ Object {
   "multiElement": null,
   "name": "name",
   "openMenu": null,
+  "openPopup": null,
   "pasteDialog": Object {
     "data": null,
     "shown": false,

src/types.ts

@@ -81,9 +81,8 @@ export type AppState = {
   isResizing: boolean;
   isRotating: boolean;
   zoom: Zoom;
-  openMenu:
-    | "canvas"
-    | "shape"
+  openMenu: "canvas" | "shape" | null;
+  openPopup:
     | "canvasColorPicker"
     | "backgroundColorPicker"
     | "strokeColorPicker"