Merge pull request #4728 from penpot/superalex-toolbar-keeps-toggling-on-and-off

🐛 Toolbar keeps toggling on and off on spacebar press

CHANGES.md

@@ -39,6 +39,7 @@
 - Fix change color on imported svg also changes the stroke alignment[Taiga #7673](https://github.com/penpot/penpot/pull/7673)
 - Fix show in view mode and interactions workflow [Taiga #4711](https://github.com/penpot/penpot/pull/4711)
 - Fix internal error when I set up a stroke for some objects without and with stroke [Taiga #7558](https://tree.taiga.io/project/penpot/issue/7558)
+- Toolbar keeps toggling on and off on spacebar press [Taiga #7654](https://github.com/penpot/penpot/pull/7654)
 
 ## 2.0.3
 

frontend/playwright/ui/pages/WorkspacePage.js

@@ -43,7 +43,9 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.presentUserListItems = page.getByTestId("active-users-list").getByAltText("Princesa Leia");
     this.viewport = page.getByTestId("viewport");
     this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
+    this.toolbarOptions =  page.getByTestId("toolbar-options");
     this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.toggleToolbarButton = page.getByRole("button", { name: "Toggle toolbar" });
     this.colorpicker = page.getByTestId("colorpicker");
     this.layers = page.getByTestId("layer-tree");
     this.palette = page.getByTestId("palette");
@@ -121,6 +123,10 @@ export class WorkspacePage extends BaseWebSocketPage {
     );
   }
 
+  async expectHiddenToolbarOptions() {
+    await expect(this.toolbarOptions).toHaveCSS("opacity", "0");
+  }
+
   async clickAssets(clickOptions = {}) {
     await this.sidebar.getByText("Assets").click(clickOptions);
   }

frontend/playwright/ui/specs/workspace.spec.js

@@ -53,3 +53,14 @@ test("User makes a group", async ({ page }) => {
   await workspacePage.page.keyboard.press("ControlOrMeta+g");
   await workspacePage.expectSelectedLayer("Group");
 });
+
+test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.goToWorkspace();
+
+  await workspacePage.toggleToolbarButton.click();
+  await workspacePage.page.keyboard.press("Backspace");
+  await workspacePage.page.keyboard.press("Enter");
+  await workspacePage.expectHiddenToolbarOptions();
+});

frontend/src/app/main/ui/workspace/top_toolbar.cljs

@@ -115,13 +115,16 @@
 
         toggle-toolbar
         (mf/use-fn
-         #(st/emit! (dwc/toggle-toolbar-visibility)))]
+         (fn [event]
+           (dom/blur! (dom/get-target event))
+           (st/emit! (dwc/toggle-toolbar-visibility))))]
 
     (when-not ^boolean read-only?
       [:aside {:class (stl/css-case :main-toolbar true
                                     :main-toolbar-no-rulers (not rulers?)
                                     :main-toolbar-hidden hide-toolbar?)}
-       [:ul {:class (stl/css :main-toolbar-options)}
+       [:ul {:class (stl/css :main-toolbar-options)
+             :data-testid "toolbar-options"}
         [:li
          [:button
           {:title (tr "workspace.toolbar.move"  (sc/get-tooltip :move))
@@ -197,7 +200,9 @@
               :on-click toggle-debug-panel}
              i/bug]])]]
 
-       [:button {:class (stl/css :toolbar-handler)
+       [:button {:title (tr "workspace.toolbar.toggle-toolbar")
+                 :aria-label (tr "workspace.toolbar.toggle-toolbar")
+                 :class (stl/css :toolbar-handler)
                  :on-click toggle-toolbar}
         [:div {:class (stl/css :toolbar-handler-btn)}]]])))
 

frontend/translations/en.po

@@ -5109,6 +5109,10 @@ msgstr "Text (%s)"
 msgid "workspace.toolbar.text-palette"
 msgstr "Typographies (%s)"
 
+#: src/app/main/ui/workspace/left_toolbar.cljs
+msgid "workspace.toolbar.toggle-toolbar"
+msgstr "Toggle toolbar"
+
 msgid "workspace.top-bar.read-only.done"
 msgstr "Done"
 

frontend/translations/es.po

@@ -5271,6 +5271,10 @@ msgstr "Texto (%s)"
 msgid "workspace.toolbar.text-palette"
 msgstr "Tipografías (%s)"
 
+#: src/app/main/ui/workspace/left_toolbar.cljs
+msgid "workspace.toolbar.toggle-toolbar"
+msgstr "Alternar barra de herramientas"
+
 msgid "workspace.top-bar.read-only.done"
 msgstr "Hecho"