Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-jxf3qm-m9eyr4

Steps to reproduce:

1. click button "Details" on any item -> detail dialog opens
2. click button "Pick one" on detail dialog -> input dialog opens (stacked)
3. input value
4. click "Ok"

Expected Behavior

The uppermost dialog (input dialog) should close and the value should be put into the model.
The console would show "The action dialog was closed".

Actual Behavior

The lower dialog (detail dialog) is closed. Further interactions with the buttons on the input dialog (being still open) leads to error due to an invalid dialog context. Only using the backdrop click closes this dialog correctly.
The console shows "The details dialog was closed".

Remarks

There is another stackblitz (https://stackblitz.com/edit/angular-jxf3qm) which shows, that using the same markup directly in the dialog template works with stacked dialogs. Only after extracting the use case specific template from the "FancyDialogComponent" so that it could be reused with different templates (which now bind to the scope of the component opening the dialog rather than the dialogs component itself), this problem occurred.

After looking into the sources of the MatDialogClose directive, I would assume that the function "getClosestDialog" returns the wrong dialogRef. At first, I thought that the correct dialogRef is now not reachable for this directive, maybe because it is deeper down the DOM. But when you click the "Pick one" button directly on the item, only the input dialog is opened and the dialogRef is bound correctly.

Environment

• Angular: 11.0.0
• CDK/Material: 11.0.0
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows