bug(dialog): usage of MAT_DIALOG_DEFAULT_OPTIONS resets default options
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện trên StackBlitz và kiểm tra provider MAT_DIALOG_DEFAULT_OPTIONS trong main.ts. So sánh hành vi focus quan sát được với tài liệu về quản lý focus của dialog và xác định vấn đề nằm ở hành vi hay ở tài liệu. Công việc được xem là hoàn tất khi bản tái hiện và hành vi focus mặc định dự kiến được đối chiếu thống nhất.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100