bug(MatDialog): When opening multiple dialogs in a short amount of time, some of them do not open

[guimabdo]

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

12.2.0

Description

When opening multiple dialogs in a short amount of time, some of them do not open

Reproduction

The bug can be noticed with the example below, when clicking the "Open Fast" button.

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
 selector: 'app-root',
 template: `
 <button (click)="openFast()">Open Fast</button>
 <button (click)="openSlow()">Open Slow</button>
 <ng-template let-data #template>
 {{data.message}}
 <button mat-dialog-close>close</button>
 </ng-template>
 `
})
export class AppComponent {
 @ViewChild("template") template?: TemplateRef<any>;
 constructor(private matDialog: MatDialog){}
 openFast(){
 this.open('1');
 setTimeout(() => this.open('2'), 1);
 setTimeout(() => this.open('3'), 50);
 setTimeout(() => this.open('4'), 100);
 setTimeout(() => this.open('5'), 150);
 setTimeout(() => this.open('6'), 200);
 }
 openSlow(){
 this.open('1');
 setTimeout(() => this.open('2'), 300);
 setTimeout(() => this.open('3'), 600);
 setTimeout(() => this.open('4'), 900);
 setTimeout(() => this.open('5'), 1200);
 setTimeout(() => this.open('6'), 1500);
 }

 private open(message: string){
 this.matDialog.open(this.template!, { 
 disableClose: true,
 data: { message } 
 });
 }
}

Expected Behavior

"Open fast" button should open 6 dialogs, just like the "Open slow" button.

Actual Behavior

The "Open fast" button opens only 2 dialogs.
On most attempts it opens (1) and (5), but in some cases (1) and (6) are open.

Environment

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

[hijamoya]

We encounter the same issue, If we call open in ngOnInit like below:

 ngOnInit() {
 setTimeout(() => this.open('2'), 0);
 }

The dialog dose not open anymore, it is fine in previous version.

However, if we just:

 ngOnInit() {
 this.open('2');
 }

The dialog will be opened correctly.

[lephyrus]

We've also hit this issue. I'm sure it was introduced with this commit. There's a comment on it that points to the underlying issue.

The commit message says the goal is to [a]void opening multiple of the same dialog before animations complete by returning the previous MatDialogRef, but the change does not check whether the two dialogs are the same. This leads to really weird behaviour, which took us a long time to figure out. Here's our use case (which was working fine before):

// injected in real code
declare const dialog: MatDialog;

// somewhere in the codebase
const dialogA = dialog.open(DialogA); // dialog that shows a spinner while async thing A is happening

// somewhere else in codebase, gets executed as part of A succeeding but can fail independently
const dialogB = dialog.open(DialogB); // dialog that shows an error
dialogB.afterClosed().pipe(/* do stuff according to user response */);

The way the timing works out in our case, dialogB will sometimes be a reference to DialogB (MatDialogRef<DialogB>, as guaranteed by the typing of open()), but mostly it will be a reference to DialogA and (more crucially) dialog B wasn't opened and we're processing a response that was given for the other dialog.

Any chance you could take another look at this, @Splaktar?

[Splaktar]

Thank you for the example code. It would be great if you could provide a runnable StackBlitz to help us investigate this more efficiently.

[Splaktar]

Does this still happen when you import NoopAnimations instead of BrowserAnimations?

components/src/material/dialog/dialog.ts

Lines 467 to 468 in 0b02322

	@Inject(ANIMATION_MODULE_TYPE)
	animationMode?: 'NoopAnimations' | 'BrowserAnimations',

[Splaktar]

@lephyrus there is a lot of discussion about the tradeoffs and issues that we faced here in the following PRs

• fix(material/dialog): improve screen reader support when opened #23228
• fix(material/dialog): improve screen reader support when opened #23085

[Splaktar]

If I had a StackBlitz for this, I could try out a few quick things right now and see if I can provide a workaround, but since I don't, I probably won't have time to look into this again this week.