From c2ff5ca1b6f49e0b54b4a42cba538f18e6a0e819 Mon Sep 17 00:00:00 2001
From: Dariusz Koryto <dkoryto@users.noreply.github.com>
Date: Fri, 16 Oct 2026 15:53:10 +0200
Subject: [PATCH] fix(diagram): keep the shape menu from blocking the editor
 (#595)

The shape-library trigger opened its menu on every pointerenter. When the
editor replaced the note list under a pointer that did not move, or when
the pointer only passed over the toolbar, the menu opened by itself and
stayed open. For mind maps and flowcharts that menu was modal, so the
back-to-list button could not be pressed until the menu was closed. On
touch screens pointerenter fires right before the pointerdown that
toggles the menu, so a tap could open it and close it again.

- Open the menu on hover only for mouse pointers.
- Make the mind-map and flowchart insert menu non-modal, as the
  architecture library already is.
---
 apps/web/src/components/DiagramEditorPane.test.mjs |  9 ++++++++-
 apps/web/src/components/DiagramEditorPane.tsx      |  2 +-
 apps/web/src/components/DiagramToolbar.tsx         | 10 +++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/DiagramEditorPane.test.mjs b/apps/web/src/components/DiagramEditorPane.test.mjs
index a5f4d6ac..9963c4cd 100644
--- a/apps/web/src/components/DiagramEditorPane.test.mjs
+++ b/apps/web/src/components/DiagramEditorPane.test.mjs
@@ -275,12 +275,19 @@ describe("diagram editor canvas surface", () => {
   test("reuses the architecture shape-library trigger across every diagram kind", () => {
     expect(toolbarSource).toContain("export const DiagramToolbarAddTrigger");
     expect(toolbarSource).toContain("<DropdownMenuTrigger asChild>");
-    expect(toolbarSource).toContain('<Button size="sm" variant="soft" onPointerEnter={onPointerEnter}>');
+    expect(toolbarSource).toContain('if (event.pointerType === "mouse") onPointerEnter(event);');
     expect(toolbarSource).toContain('<Boxes className="h-4 w-4" />');
     expect(toolbarSource).toContain('{t("diagram.componentLibrary")}');
     expect(source.match(/<DiagramToolbarAddTrigger onPointerEnter=/g)).toHaveLength(2);
   });
 
+  test("keeps a shape menu opened by hover from blocking the rest of the editor", () => {
+    // Touch fires pointerenter right before the pointerdown that toggles the
+    // menu, and a modal menu hides the back button while it is open.
+    expect(toolbarSource).not.toContain("onPointerEnter={onPointerEnter}");
+    expect(source.match(/<DropdownMenu modal=\{false\} open=\{open\}/g)).toHaveLength(2);
+  });
+
   test("exposes connection handles on flowcharts and architecture components with safe connection rules", () => {
     expect(source).toContain("const hasPorts = isConnectableDiagram(kind) && node.shape !== \"boundary\"");
     expect(source).toContain("const FLOW_PORT_HIT_RADIUS = 14");
diff --git a/apps/web/src/components/DiagramEditorPane.tsx b/apps/web/src/components/DiagramEditorPane.tsx
index 4b4c6246..4c98012a 100644
--- a/apps/web/src/components/DiagramEditorPane.tsx
+++ b/apps/web/src/components/DiagramEditorPane.tsx
@@ -686,7 +686,7 @@ const DiagramInsertMenu = ({
 }) => {
   const [open, setOpen] = useState(false);
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
+    <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
       <DiagramToolbarAddTrigger onPointerEnter={() => setOpen(true)} />
       <DropdownMenuContent align="start">
         {items.map((item) => {
diff --git a/apps/web/src/components/DiagramToolbar.tsx b/apps/web/src/components/DiagramToolbar.tsx
index ba4477ea..1c813122 100644
--- a/apps/web/src/components/DiagramToolbar.tsx
+++ b/apps/web/src/components/DiagramToolbar.tsx
@@ -174,7 +174,15 @@ export const DiagramToolbarAddTrigger = ({
   const { t } = useTranslation();
   return (
     <DropdownMenuTrigger asChild>
-      <Button size="sm" variant="soft" onPointerEnter={onPointerEnter}>
+      <Button
+        size="sm"
+        variant="soft"
+        // Hover opening is for mice. A touch fires pointerenter right before the
+        // pointerdown that toggles the menu, which would close it again.
+        onPointerEnter={(event) => {
+          if (event.pointerType === "mouse") onPointerEnter(event);
+        }}
+      >
         <Boxes className="h-4 w-4" />
         {t("diagram.componentLibrary")}
         <ChevronDown className="h-3.5 w-3.5 text-slate-400" />