Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#33,967 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

  • #33989 de @MeAkib — cerrado sin fusionar

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
accessibility, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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)
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
2 d 18 h
PR fusionados (30 d)
81

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.