Skip to content

Side menu dropdown mispositioned when rendered inside transformed container (missing Portal) #2321

@letrplB

Description

@letrplB

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

  1. Open any BlockNote editor using @blocknote/shadcn
  2. Hover over a block to show the side menu
  3. Click the 6-dot drag handle button
  4. 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
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions