Skip to content

Navigation Menu

Sign in
Sign up

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:

  1. Chat trigger menu (Chat/useTriggerMenu.tsx) — onMouseEnter sets highlightedIndex, and an effect calls scrollIntoView on every highlight change without distinguishing hover from keyboard navigation.
  2. DropdownMenu / ContextMenu / BreadcrumbMenu (DropdownMenu/menuItemHover.ts) — focusMenuItemOnHover calls el.focus() without {preventScroll: true}, so focusing an off-screen item scrolls it under the pointer.
Image

Steps to reproduce (either surface)

  1. Open a menu whose item list overflows (more items than fit in the scroll container).
  2. Keep the mouse pointer completely still, resting on an item near the bottom edge of the visible list.
  3. 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 from onMouseEnter.
  • 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      AltStyle によって変換されたページ (->オリジナル) /