From e7ed06e2f41b7071b89a869b6b2fe2d28106e1be Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Wed, 13 May 2026 13:12:13 +0000
Subject: [PATCH] =?UTF-8?q?fix(canvas/Toolbar):=20help=20button=20always?=
 =?UTF-8?q?=20opens=20=E2=80=94=20no=20double-click=20close=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The help button's onClick used setHelpOpen((open) => !open) (toggle).
Combined with the window.pointerdown handler that closes on outside-click,
clicking outside then clicking the help button would: pointerdown outside
(close) → click on button (!false = true → open) → pointerdown ON button
(contains=true, no close) → BUT the next interaction would have stale
toggle state causing a double-close on the following click.

Fix: button onClick always calls setHelpOpen(true) — the pointerdown
outside handler owns the close path; the button only opens.

Also add 2 tests: pointer-down-outside closes, and re-open works after
outside click (regression for the double-click bug).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/Toolbar.tsx             |  2 +-
 .../src/components/__tests__/Toolbar.test.tsx | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx
index c9b3f976..b2563aee 100644
--- a/canvas/src/components/Toolbar.tsx
+++ b/canvas/src/components/Toolbar.tsx
@@ -314,7 +314,7 @@ export function Toolbar() {
       <div ref={helpRef} className="relative">
         <button
           type="button"
-          onClick={() => setHelpOpen((open) => !open)}
+          onClick={() => setHelpOpen(true)}
           className="flex items-center justify-center w-7 h-7 bg-surface-card hover:bg-surface-card/70 border border-line rounded-lg transition-colors text-ink-mid hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
           aria-expanded={helpOpen}
           aria-label="Open shortcuts and tips"
diff --git a/canvas/src/components/__tests__/Toolbar.test.tsx b/canvas/src/components/__tests__/Toolbar.test.tsx
index 60e74c7c..81642e25 100644
--- a/canvas/src/components/__tests__/Toolbar.test.tsx
+++ b/canvas/src/components/__tests__/Toolbar.test.tsx
@@ -255,6 +255,32 @@ describe("Toolbar — Help popover", () => {
     fireEvent.click(closeBtn);
     expect(screen.queryByRole("dialog")).toBeNull();
   });
+
+  it("closes when pointer is pressed outside the help popover", () => {
+    render(<Toolbar />);
+    const helpBtn = screen.getByRole("button", { name: /open shortcuts and tips/i });
+    fireEvent.click(helpBtn);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    // Simulate pointerdown outside the help popover (not on the help button)
+    fireEvent.pointerDown(document.body);
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("opens on click even after a previous pointer-outside close", () => {
+    // Regression: clicking outside closed the popover AND toggled the button
+    // state, so the next click on the button would close it again.
+    // The fix makes the button always open (never toggle) so re-opening works.
+    render(<Toolbar />);
+    const helpBtn = screen.getByRole("button", { name: /open shortcuts and tips/i });
+    fireEvent.click(helpBtn);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    // Click outside (pointerdown on body, not on help button)
+    fireEvent.pointerDown(document.body);
+    expect(screen.queryByRole("dialog")).toBeNull();
+    // Click the help button again — must re-open, not double-close
+    fireEvent.click(helpBtn);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+  });
 });
 
 describe("Toolbar — A2A edges toggle", () => {