跳到主要内容

修复 Popover / DropdownMenu 在 Dialog 内滚轮失效（WEB-1109）

版本： 0.4.6 · 类型： 🐛 缺陷修复

WEB-1109

问题​

通过 portal 渲染在 Dialog 内部的 Popover、DropdownMenu、ContextMenu、Select 中，滚动鼠标滚轮无任何效果。

根本原因： react-remove-scroll（Dialog 的依赖）在 document 层挂载 wheel 监听器，对所有 wheel 事件调用 preventDefault，除非目标节点在其认可的可滚动容器内。由于 Radix portal 将内容渲染到 document.body，脱离了 Dialog 的 DOM 子树，portal 化的弹层内容不被识别为合法容器，所有 wheel 事件因此被拦截。

改动文件​

  • 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 (新增)

改动内容​

新增 useStopWheelPropagation hook，在弹层内容节点上以 { passive: true } 挂载原生 wheel 事件监听器并调用 stopPropagation()，阻止事件到达 react-remove-scroll 的 document 处理器。已应用至 PopoverContent、DropdownMenuContent、DropdownMenuSubContent、ContextMenuContent、ContextMenuSubContent 和 SelectContent。