bug(dialog): usage of MAT_DIALOG_DEFAULT_OPTIONS resets default options
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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
Guía de contribución
Línea de trabajo
Comienza con la reproducción de StackBlitz e inspecciona el proveedor MAT_DIALOG_DEFAULT_OPTIONS en main.ts. Compara el comportamiento de foco observado con la documentación sobre la gestión del foco de los diálogos y determina si el problema está en el comportamiento o en la documentación. Se considera terminado cuando la reproducción y el comportamiento predeterminado esperado del foco estén reconciliados.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100