angular / angular/components

bug(dialog): usage of MAT_DIALOG_DEFAULT_OPTIONS resets default options

オープン
#28,096 コメント 1 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/dialog P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

StackBlitz の再現から始め、main.ts の MAT_DIALOG_DEFAULT_OPTIONS provider を調べます。観測されたフォーカス動作をダイアログのフォーカス管理に関するドキュメントと比較し、問題が動作にあるのかドキュメントにあるのかを判断します。再現と期待されるデフォルトのフォーカス動作の整合性が取れれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。