Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#33,967 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
accessibility, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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)
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 7 h
PR mergées (30 j)
69

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/components

Toutes les issues de angular/components

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.