Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#33,967 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
accessibility, frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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)
Linguagem predominante
TypeScript
Estrelas
25k
Forks
6.8k
Merge médio
1d 7h
PRs com merge (30d)
69

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/components

Todas as issues de angular/components

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.