Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

bug(material/menu): menu restores focus to its trigger after a menu item opens a dialog (animations disabled / prefers-reduced-motion)

Offen
  • Stimmt etwas nicht?
#33,967 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

  • #33989 von @MeAkib — ohne Merge geschlossen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
accessibility, frontend

Rechercherichtung

The restore logic is in _destroyMenu in src/material/menu/menu-trigger-base.ts, which calls this.focus(this._openedBy) after a closed('click') event without checking where focus currently is. Read how the dialog's FocusTrap sets initial focus, then reproduce with animations disabled to confirm focus lands on the trigger. Done means focus stays on the dialog's cdkFocusInitial button after a menu item opens it, while Escape, Tab and backdrop closes still restore focus to the trigger. Check that the maintainers accept the proposed guard before writing it.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: material/menu P3
Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

When a mat-menu item opens a MatDialog and animations are disabled (provideNoopAnimations / animations disabled, or the user's OS has reduced motion so prefers-reduced-motion: reduce matches), the dialog ends up with no focus: focus is moved back to the menu trigger behind the dialog's backdrop.

Cause: with animations disabled the dialog's initial focus runs synchronously during the menu item's click (in the microtask after the click listener). The click then reaches the menu panel, which emits closed('click'), and MatMenuTriggerBase._destroyMenu calls this.focus(this._openedBy) unconditionally, without checking where focus currently is. With animations enabled the dialog focuses ~150ms later, after the menu has closed, so the problem doesn't show.

Since prefers-reduced-motion comes from an OS setting (e.g. Windows "Animation effects" off), regular users hit this, and keyboard and screen-reader users land on a control hidden behind the modal.

This was reported in #14879, which was closed as a duplicate of #11696 before the reporter clarified it only happens with NoopAnimationsModule; it was then locked. The menu code on main still restores focus unconditionally.

Possible fix, following the dialog's own guard from #17300 ("don't move focus if it was moved during close animation"): in _destroyMenu, when the close reason is 'click', skip restoring focus if it is already inside a different overlay pane (not the menu's own pane, not a menu panel such as a submenu, and not the overlay pane that contains the trigger itself). Every other close (Escape, Tab, backdrop click, programmatic close) keeps today's
behaviour. This doesn't change the accessibility position in #11696: focus still returns to the trigger whenever the menu owns it; it only stops the menu from pulling focus out of a modal that an item just opened. Happy to send a PR with tests if this direction is acceptable.

Reproduction

StackBlitz (from #14879, older Angular/Material):
https://stackblitz.com/edit/checkbox-reactive-2zhjpp?file=app%2Fapp.component.ts

I wasn't able to save a new StackBlitz, so this links the reproduction from #14879. The bug is not specific to that
old version:

  • It reproduces on Angular 21.2.25 / @angular/cdk + @angular/material 21.1.2 in an application with animations
    disabled through the OS setting (Windows "Animation effects" off, so prefers-reduced-motion: reduce matches and
    Material disables its animations). After a menu item opens a MatDialog, document.activeElement is the menu trigger
    behind the dialog's backdrop, not the dialog's cdkFocusInitial button.

  • The cause is unchanged on main: MatMenuTriggerBase._destroyMenu in src/material/menu/menu-trigger-base.ts
    still ends with

    if (this.restoreFocus && (reason === 'keydown' || !this._openedBy || !this._triggersSubmenu())) {
    this.focus(this._openedBy);
    }

    with no check of where focus currently is, so whenever the dialog takes focus before the menu finishes closing
    (always the case with animations disabled), the menu takes it back.

Steps (old StackBlitz, which uses NoopAnimations):

  1. Open the StackBlitz and click the menu trigger.
  2. Click the menu item that opens the dialog.
  3. In the console, run document.activeElement: it is the menu trigger, not the dialog's button.

Single-file reproduction for current versions (Angular/Material 21; paste as main.ts in a new Angular project):

import {Component, inject} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import {MatButtonModule} from '@angular/material/button';
import {MatMenuModule} from '@angular/material/menu';
import {MatDialog, MatDialogModule} from '@angular/material/dialog';

@Component({
imports: [MatButtonModule, MatDialogModule],
template: <mat-dialog-content>Delete this item?</mat-dialog-content> <mat-dialog-actions> <button mat-button mat-dialog-close cdkFocusInitial>Cancel</button> <button mat-button [mat-dialog-close]="true">Delete</button> </mat-dialog-actions>,
})
export class ConfirmDialog {}

@Component({
selector: 'app-root',
imports: [MatButtonModule, MatMenuModule, MatDialogModule],
template: <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="open()">Open dialog</button> </mat-menu>,
})
export class App {
private dialog = inject(MatDialog);
open() { this.dialog.open(ConfirmDialog); }
}

bootstrapApplication(App);

On 21, emulate reduced motion (DevTools > Rendering > "Emulate CSS media feature prefers-reduced-motion: reduce", then
reload) or set the OS animation setting off, then click Menu > Open dialog and check document.activeElement.

Expected Behavior

Focus stays on the dialog's initial focus target (the "Cancel" button with cdkFocusInitial), showing its focus indicator, exactly as it does when animations are enabled. The menu should not move focus back to its trigger while an overlay opened by the menu item holds focus.

Actual Behavior

The dialog opens, but focus is on the menu trigger ("Menu") behind the dialog's backdrop: document.activeElement is the trigger button with cdk-focused / cdk-mouse-focused. The dialog shows no focused control, Enter re-activates the hidden trigger, and Tab starts from outside the dialog. The dialog's FocusTrap did focus "Cancel" first; the menu's _destroyMenu then called focus() on the trigger.

document.activeElement after the dialog opens: button.mat-mdc-menu-trigger (the menu trigger, behind the backdrop)

Environment
  • Angular: 21.2.25
  • CDK/Material: 21.1.2 (the same unconditional restore is still in src/material/menu/menu-trigger-base.ts on main)
  • Browser(s): Chrome ; also reproduced in an embedded Chromium. Any browser with animations disabled or
    prefers-reduced-motion: reduce.
  • Operating System: Windows 11 (Settings > Accessibility > Visual effects > Animation effects: Off)
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
2 T. 18 Std.
Gemergte PRs (30 T.)
81

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/components

Alle Issues in angular/components

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.