bug(dialog): usage of MAT_DIALOG_DEFAULT_OPTIONS resets default options

[DanielHabenicht]

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

{
    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:

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.
4. Open Dialog
5. 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

[MFredX]

This bug is observed in v19 as well.

If anyone is wanting a workaround for this, initialise the base config and overwrite the fields important to you

const myOptions = {
...new MatDialogConfig(),
 panelClass: 'mat-field-inside-dialog-workaround'
}

/* In your provider definitions */
providers : [
 {
    provide: MAT_DIALOG_DEFAULT_OPTIONS,
    useValue: myOptions
 }
]