From 740a8722312f2a3e43f5cf514f649c0be4c64abd Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandroalonsofernandez@gmail.com>
Date: Wed, 12 Jun 2024 13:12:58 +0200
Subject: [PATCH] :bug: Toolbar keeps toggling on and off on spacebar press

---
 CHANGES.md                                          |  1 +
 frontend/playwright/ui/pages/WorkspacePage.js       |  6 ++++++
 frontend/playwright/ui/specs/workspace.spec.js      | 11 +++++++++++
 frontend/src/app/main/ui/workspace/top_toolbar.cljs | 11 ++++++++---
 frontend/translations/en.po                         |  4 ++++
 frontend/translations/es.po                         |  4 ++++
 6 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index e5a698f34..5ec9ccca7 100644
--- a/CHANGES.md
+++ b/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
 
diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js
index 131f94943..723a3947c 100644
--- a/frontend/playwright/ui/pages/WorkspacePage.js
+++ b/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);
   }
diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js
index c96967384..46c292269 100644
--- a/frontend/playwright/ui/specs/workspace.spec.js
+++ b/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();
+});
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs
index 979c84e19..a7546507b 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs
+++ b/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)}]]])))
 
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 46f507c17..6f87ee268 100644
--- a/frontend/translations/en.po
+++ b/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"
 
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index ea0c9e5d6..35c05984f 100644
--- a/frontend/translations/es.po
+++ b/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"