Merge pull request #347 from ArnasDon/fix/flows-add-node-crash

fix(flows): wrap add-node menu groups in DropdownMenuGroup (#336)

src/components/flows/flow-builder.tsx

@@ -17,7 +17,7 @@
  * are list-only and have no canvas analogue.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   CircleAlert,
   Plus,
@@ -39,6 +39,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -589,8 +590,13 @@ function AddNodeButton({ onAdd }: { onAdd: (type: NodeType) => void }) {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="border-border bg-popover">
         {groupNodeTypesByCategory(types).map((group, i) => (
-          <div key={group.id}>
+          // A DropdownMenuGroup (base-ui Menu.Group) is REQUIRED here:
+          // DropdownMenuLabel is base-ui's Menu.GroupLabel, which throws
+          // at render if it can't find a Menu.Group ancestor context. A
+          // plain <div> wrapper made opening this menu crash the page.
+          <Fragment key={group.id}>
             {i > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuGroup>
               <DropdownMenuLabel className="text-muted-foreground text-[11px] font-semibold tracking-wider uppercase">
                 {group.label}
               </DropdownMenuLabel>
@@ -603,7 +609,8 @@ function AddNodeButton({ onAdd }: { onAdd: (type: NodeType) => void }) {
                   </DropdownMenuItem>
                 );
               })}
-          </div>
+            </DropdownMenuGroup>
+          </Fragment>
         ))}
       </DropdownMenuContent>
     </DropdownMenu>

src/components/flows/flow-canvas.tsx

@@ -36,7 +36,7 @@
  * list view reads.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   applyNodeChanges,
   Background,
@@ -87,6 +87,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -737,8 +738,13 @@ function CanvasAddNodeButton() {
         className="border-border bg-popover w-[268px] p-1.5"
       >
         {groupNodeTypesByCategory(ADD_NODE_TYPES).map((group, i) => (
-          <div key={group.id}>
+          // DropdownMenuGroup (base-ui Menu.Group) is REQUIRED: the
+          // DropdownMenuLabel below is base-ui's Menu.GroupLabel, which
+          // throws at render without a Menu.Group ancestor. A plain <div>
+          // here crashed the page when this menu opened (issue #336).
+          <Fragment key={group.id}>
             {i > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuGroup>
               <DropdownMenuLabel className="text-muted-foreground px-2 py-1.5 text-[11px] font-semibold tracking-wider uppercase">
                 {group.label}
               </DropdownMenuLabel>
@@ -767,7 +773,8 @@ function CanvasAddNodeButton() {
                   </DropdownMenuItem>
                 );
               })}
-          </div>
+            </DropdownMenuGroup>
+          </Fragment>
         ))}
       </DropdownMenuContent>
     </DropdownMenu>

src/components/ui/dropdown-menu-group-label.test.tsx

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { DropdownMenuGroup, DropdownMenuLabel } from './dropdown-menu'
+
+/**
+ * Regression for issue #336 — "clicking Add node reloads the page".
+ *
+ * DropdownMenuLabel is base-ui's Menu.GroupLabel, which reads a required
+ * Menu.Group context and THROWS at render when it's missing. The flow
+ * builder's add-node menu wrapped its labels in a plain <div> instead of
+ * a DropdownMenuGroup, so opening the menu crashed the whole page. These
+ * tests pin the contract so the div-wrapper regression can't come back.
+ */
+describe('DropdownMenuLabel requires a DropdownMenuGroup ancestor', () => {
+  it('throws when rendered without a group (the #336 crash)', () => {
+    expect(() =>
+      renderToStaticMarkup(
+        React.createElement(DropdownMenuLabel, null, 'Messaging'),
+      ),
+    ).toThrow()
+  })
+
+  it('renders when wrapped in a DropdownMenuGroup (the fix)', () => {
+    expect(() =>
+      renderToStaticMarkup(
+        React.createElement(
+          DropdownMenuGroup,
+          null,
+          React.createElement(DropdownMenuLabel, null, 'Messaging'),
+        ),
+      ),
+    ).not.toThrow()
+  })
+})