angular / angular/components

bug(dialog): usage of MAT_DIALOG_DEFAULT_OPTIONS resets default options

Offen
#28,096 1 Kommentar 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/dialog P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

This is either a documentation issue or an issue with the behaviour of `MAT_DIALOG_DEFAULT_OPTIONS`.

When specifying
```js
{
provide: MAT_DIALOG_DEFAULT_OPTIONS,
useValue: {
panelClass: 'mat-field-inside-dialog-workaround',
} as MatDialogConfig
}
```

The `autoFocus` of dialogs gets disabled, this is unexpected as the developer never stated it to be disabled and [the documentation states](https://material.angular.io/components/dialog/overview#focus-management):
> When opened, MatDialog traps browser focus such that it cannot escape the root role="dialog" element. **By default, the first tabbable element in the dialog receives focus.** You can customize which element receives focus with the autoFocus property of MatDialogConfig, which supports the following values.

###

### Reproduction

StackBlitz link: https://stackblitz.com/edit/kxsrvy?file=src%2Fexample%2Fdialog-overview-example.ts
Steps to reproduce:
1. Open Dialog
2. There is no focus set on the input
3. Comment out the `MAT_DIALOG_DEFAULT_OPTIONS ` in `main.ts`.
1. Open Dialog
2. There **is** focus set on the input

### Expected Behavior

The default should be kept,

Otherwise the documentation should be revised that overwriting another property can change others.

### Actual Behavior

Overwriting one property of `MatDialogConfig` in `MAT_DIALOG_DEFAULT_OPTIONS` changes the default behaviour of unrelated (not overwritten properties).

### Environment

- Angular: 16.2.5
- CDK/Material: 16.2.12
- Browser(s): Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der StackBlitz-Reproduktion und untersuche den Provider MAT_DIALOG_DEFAULT_OPTIONS in main.ts. Vergleiche das beobachtete Fokusverhalten mit der Dokumentation zur Fokusverwaltung von Dialogen und ermittle, ob das Problem im Verhalten oder in der Dokumentation liegt. Als erledigt gilt die Aufgabe, wenn Reproduktion und erwartetes Standardfokusverhalten miteinander in Einklang gebracht sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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