Skip to main content

Popover / DropdownMenu wheel scroll blocked inside Dialog (WEB-1109)

Version: 0.4.6 ยท Type: ๐Ÿ› Bug Fix

WEB-1109

Problemโ€‹

Scrolling inside a Popover, DropdownMenu, ContextMenu, or Select that was portaled inside a Dialog did not work โ€” the scroll wheel had no effect.

Root cause: react-remove-scroll (a Dialog dependency) attaches a document-level wheel listener and calls preventDefault on all wheel events unless the target is within an "allowed" scroll container. Because Radix portals render into document.body outside the Dialog's DOM subtree, the portaled overlay content was not recognized as an allowed container, so all wheel events inside it were blocked.

Changed Filesโ€‹

  • packages/design/src/components/ui/popover.tsx
  • packages/design/src/components/ui/dropdown-menu.tsx
  • packages/design/src/components/ui/context-menu.tsx
  • packages/design/src/components/ui/select.tsx
  • packages/design/src/hooks/useStopWheelPropagation.ts (new)

Changesโ€‹

Added useStopWheelPropagation hook that attaches a native (non-React) wheel event listener with { passive: true } and calls stopPropagation() on the overlay content node. This prevents the event from reaching react-remove-scroll's document handler before it can call preventDefault. Applied to PopoverContent, DropdownMenuContent, DropdownMenuSubContent, ContextMenuContent, ContextMenuSubContent, and SelectContent.