-
-
Notifications
You must be signed in to change notification settings - Fork 664
Open
Description
Description
The drag handle menu (Delete/Colors dropdown) appears ~150px above the side menu button instead of adjacent to it.
Root Cause
DropdownMenuContent in @blocknote/shadcn renders without a Portal wrapper. When the side menu's floating-ui container applies transform, it creates a new containing block per CSS spec. Radix's position: fixed popper then positions relative to this transformed ancestor instead of the viewport.
DOM hierarchy showing the issue:
[data-blocknote-editor] (position: relative)
└── [data-floating-ui-focusable] (position: absolute, transform: translate(6px, 174px)) ← creates containing block
└── [data-radix-popper-content-wrapper] (position: fixed) ← fixed is now relative to transformed ancestor
└── [data-radix-menu-content] ← dropdown renders here, ~150px too high
Steps to Reproduce
- Open any BlockNote editor using
@blocknote/shadcn - Hover over a block to show the side menu
- Click the 6-dot drag handle button
- Observe dropdown appears far above the button instead of adjacent to it
Expected Behavior
The dropdown menu should appear directly next to/below the drag handle button.
Suggested Fix
Wrap DropdownMenuContent in DropdownMenuPrimitive.Portal in either:
packages/shadcn/src/menu/Menu.tsx(line ~123)packages/shadcn/src/components/ui/dropdown-menu.tsx(line ~40)
This ensures the dropdown renders at document.body level, outside the transformed floating-ui container.
Environment
@blocknote/shadcn: 0.44.2@blocknote/react: 0.44.2- Browser: Chrome (macOS)
Metadata
Metadata
Assignees
Labels
No labels