Skip to content

Calling MatMenuItem#focus() does not update the MatMenu's focusKeyManager's active item #17761

Closed
hrueger/AGLight
#112
@pshields

Description

@pshields

Reproduction

Repro: https://stackblitz.com/edit/components-issue-svmexm

Steps to reproduce:

  1. Open a menu
  2. Programatically focus some mat-menu-item other than the first one (in the stackblitz repro above, the third mat-menu-item, "C" is focused, due to the onOpen() method in AppComponent, which calls the third mat-menu-item's focus method.)
  3. Press the down arrow key (note: a similar variant applies to the up arrow case.)

Expected Behavior

What behavior were you expecting to see?

The next mat-list-item, "D", should be focused.

Actual Behavior

What behavior did you actually see?

The second mat-list-item, "B", is focused.

Analysis

This is happening because the mat menu's FocusKeyManager still thinks the first mat menu item is the active item, even thought we programatically focused a different mat-menu-item. Since mat menu's key manager is private / not exposed to downstream developers, I don't think there's a way to address it currently without a change to Angular Material.

Some possible solutions

  • Update the MatMenuItem#focus method to also update the mat menu's active item at the same time
  • Expose the mat menu's key manager so downstream developers can call its setActiveItem method.
  • Add to the mat menu public API a method to set the active item key manager's active item

Environment

  • Angular: 8
  • CDK/Material: 8
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions