Skip to main content

Breadcrumb ellipsis dropdown no longer locks page scroll (WEB-1496)

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

WEB-1496 ยท reported from ANT-1377

Problemโ€‹

On the file detail page, clicking the ellipsis in the breadcrumb to expand the collapsed-items dropdown made the entire page unscrollable โ€” wheel / touchmove were blocked page-wide while the dropdown was open.

Root causeโ€‹

BreadcrumbEllipsisMenu rendered <DropdownMenu items={menuItems} align="start"> without a modal prop, and nothing further down the chain supplied a default, so it fell through to Radix DropdownMenu.Root's default modal={true}. The modal path mounts react-remove-scroll, which intercepts wheel / touchmove at the document level and sets pointer-events: none on body while the menu is open. The breadcrumb ellipsis menu is a plain navigation aid and never needed this page-level lock.

Changed Filesโ€‹

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

Changesโ€‹

  1. BreadcrumbEllipsisMenu now passes modal={false} explicitly to DropdownMenu, with a comment noting the menu is a navigation aid, not a modal interaction.
  2. Added a unit test: after opening the ellipsis dropdown, the render container carries no aria-hidden attribute. Radix's modal path calls hideOthers on sibling elements outside the menu; the non-modal path does not, making this a reliable signal that the dropdown is not running in modal mode.

Impactโ€‹

  • Opening the breadcrumb ellipsis dropdown no longer blocks page scrolling or interaction with the rest of the page.
  • No visual change; the dropdown's own scrolling and click-outside-to-close behavior are unaffected.