-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Menus: runaway auto-scroll loop when pointer rests near the bottom of a scrollable menu #6077
Open
Description
When a scrollable menu's highlight follows the mouse, scrolling the highlighted item into view moves the next item under the stationary pointer, which re-highlights and scrolls again — an endless auto-scroll loop with no user input. Two surfaces share this bug:
- Chat trigger menu (
Chat/useTriggerMenu.tsx) —onMouseEntersetshighlightedIndex, and an effect callsscrollIntoViewon every highlight change without distinguishing hover from keyboard navigation. - DropdownMenu / ContextMenu / BreadcrumbMenu (
DropdownMenu/menuItemHover.ts) —focusMenuItemOnHovercallsel.focus()without{preventScroll: true}, so focusing an off-screen item scrolls it under the pointer.
Steps to reproduce (either surface)
- Open a menu whose item list overflows (more items than fit in the scroll container).
- Keep the mouse pointer completely still, resting on an item near the bottom edge of the visible list.
- Press ArrowDown once or twice to move the highlight toward the bottom.
Actual behavior
The menu scrolls endlessly on its own.
Expected behavior
Hover-driven highlight changes should never scroll the menu. scrollIntoView/focus scrolling should apply only to keyboard-driven highlight changes (or use {preventScroll: true} for hover-driven focus).
Minimal reproduction (DropdownMenu)
Open https://astryx.atmeta.com/playground, open the menu, and keep the pointer hovering over the "Template" item at the bottom of the list.
Or
function MenuRepro() { const items = Array.from({length: 25}, (_, i) => ({ label: `Item ${i + 1}`, onClick: () => {}, })); return <DropdownMenu button={{label: 'Open'}} items={items} />; }
Suggested fix
Chat/useTriggerMenu.tsx: skip the scroll-into-view effect for one run when the highlight change came fromonMouseEnter.DropdownMenu/menuItemHover.ts:el.focus({preventScroll: true})— the focus highlight does not require scrolling; keyboard navigation has its own scroll-into-view handling.
Environment
- Package:
@astryxdesign/core - Browsers: all (pure pointer/scroll interaction)
Activity
Metadata
Metadata
Assignees
Labels
No labels