跳到主要内容

Breadcrumb 折叠下拉打开时不再锁住整页滚动 (WEB-1496)

版本： 0.9.1 · 类型： 🐛 Bug 修复

WEB-1496 · 来源 ANT-1377

问题​

文件详情页中，点击面包屑省略号展开折叠项下拉菜单后，整个页面无法滚动——下拉打开期间 wheel / touchmove 在页面级被整体拦截。

根因​

BreadcrumbEllipsisMenu 渲染 <DropdownMenu items={menuItems} align="start"> 时没有传 modal，链路上其余环节也没有提供默认值兜底，最终落到 Radix DropdownMenu.Root 默认的 modal={true}。modal 模式会挂载 react-remove-scroll，在 document 层拦截 wheel / touchmove，并在菜单打开期间给 body 设 pointer-events: none。而面包屑的省略号菜单只是一个普通的导航辅助入口，本不需要这种页面级锁定。

改动文件​

  • packages/design/src/components/Breadcrumb/Breadcrumb.tsx
  • packages/design/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx

改动内容​

  1. BreadcrumbEllipsisMenu 给 DropdownMenu 显式传入 modal={false}，并加注释说明该菜单是导航辅助、并非 modal 交互。
  2. 新增单测：打开省略号下拉后，断言渲染容器不带 aria-hidden 属性。Radix modal 模式会对菜单外的兄弟元素调用 hideOthers 打上 aria-hidden，非 modal 模式不会，因此这是判断下拉是否进入 modal 模式的可靠信号。

影响​

  • 打开面包屑省略号下拉菜单后，页面滚动与其余区域的交互不再被阻断。
  • 无视觉变化；下拉自身的滚动与点击外部关闭行为不受影响。