Skip to content

Menu highlights the first item when opened with a pointer #4688

Description

@xelaint

Is this a regression?

  • Yes, this behavior used to work in the previous version

Description

daff-menu focuses its first menu item every time it opens, and the item's theme styling keys off bare :focus. Opening the menu with a mouse click or a tap ends up displaying the focused background, as though it were already selected.

Environment

  • Daffodil version: 0.94.1
  • Angular version: 21
  • Browser(s):
  • Node version: run node --version
  • Operating system:

Steps to reproduce

  1. Render a [daffMenuActivator] button with a daff-menu containing two or more daff-menu-item elements.
  2. Click the activator with a mouse.
  3. Look at the first menu item.

Expected behavior

Opening the menu with a pointer should not have any items showing the focus highlight style. Opening it from the keyboard (Enter or Space on the activator) highlights the first item so it's clear where arrow-key navigation starts.

Actual behavior

The first menu item is highlighted no matter how the menu was opened, so a pointer-opened menu looks like it already has a selection.

Additional context

The fix is to track the open origin and let it decide how the focus looks:

  • DaffMenuActivatorDirective should record what it was last interacted with and passes it to DaffMenuService.open()
  • DaffMenuService should expose it as origin.
  • DaffMenuComponent should call setFocusOrigin(origin).setFirstItemActive(), falling back to focusing the menu itself when there are no items so Escape still closes it.
  • DaffMenuItemComponent and DaffBreadcrumbMenuItemDirective should monitor themselves with FocusMonitor and forward the origin through focusVia.
  • menu-theme.scss should style .cdk-keyboard-focused instead of :focus.

Breadcrumb needs to be updated because DaffBreadcrumbMenuItemDirective adds the daff-menu-item class to the element it projects.

Once the highlight moves from :focus to .cdk-keyboard-focused, an item is only highlighted if FocusMonitor is monitoring it and the origin is forwarded through focusVia. The breadcrumb directive's focus() does neither, so leaving it alone would drop the focus highlight from breadcrumb menus entirely.

Activity

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

Metadata

Metadata

Assignees

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions