Skip to content

fix(material/menu): do not auto-focus when hover opens menu #31257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 30, 2025
Merged

fix(material/menu): do not auto-focus when hover opens menu #31257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions src/material/menu/menu-trigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,12 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {

/** Opens the menu. */
openMenu(): void {
// Auto focus by default
this._openMenu(true);
}

/** Internal method to open menu providing option to auto focus on first item. */
private _openMenu(autoFocus: boolean): void {
const menu = this.menu;

if (this._menuOpen || !menu) {
Expand Down Expand Up @@ -317,7 +323,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
menu.parentMenu = this.triggersSubmenu() ? this._parentMaterialMenu : undefined;
menu.direction = this.dir;
menu.focusFirstItem(this._openedBy || 'program');
if (autoFocus) menu.focusFirstItem(this._openedBy || 'program');
this._setIsMenuOpen(true);

if (menu instanceof MatMenu) {
Expand Down Expand Up @@ -590,7 +596,10 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
this._hoverSubscription = this._parentMaterialMenu._hovered().subscribe(active => {
if (active === this._menuItemInstance && !active.disabled) {
this._openedBy = 'mouse';
this.openMenu();
// Open the menu, but do NOT auto-focus on first item when just hovering.
// When VoiceOver is enabled, this is particularly confusing as the focus will
// cause another hover event, and continue opening sub-menus without interaction.
this._openMenu(false);
}
});
}
Expand Down
4 changes: 2 additions & 2 deletions src/material/menu/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2510,7 +2510,7 @@ describe('MatMenu', () => {
}),
);

it('should not re-focus a child menu trigger when hovering another trigger', fakeAsync(() => {
it('should preserve focus on a child menu trigger when hovering another trigger', fakeAsync(() => {
dispatchFakeEvent(instance.rootTriggerEl.nativeElement, 'mousedown');
instance.rootTriggerEl.nativeElement.click();
fixture.detectChanges();
Expand All @@ -2529,7 +2529,7 @@ describe('MatMenu', () => {
fixture.detectChanges();
tick(500);

expect(document.activeElement).not.toBe(
expect(document.activeElement).toBe(
levelOneTrigger,
'Expected focus not to be returned to the initial trigger.',
);
Expand Down
Loading