components: bug(MatDialog): When opening multiple dialogs in a short amount of time, some of them do not open
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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 6
- Comments: 37 (16 by maintainers)
Commits related to this issue
- fix(material/dialog): improve screen reader support when opened (#23085) - notify screen reader users that they have entered a dialog - previously only the focused element would be read i.e. "Close... — committed to angular/components by Splaktar 3 years ago
- fix(material/dialog): don't wait for animation before moving focus For a long time we used to move focus into the dialog after the opening animation was finished, because it allowed for the content t... — committed to crisbeto/material2 by crisbeto 3 years ago
- fix(material/dialog): don't wait for animation before moving focus For a long time we used to move focus into the dialog after the opening animation was finished, because it allowed for the content t... — committed to crisbeto/material2 by crisbeto 3 years ago
- fix(material/dialog): don't wait for animation before moving focus (#24121) * fix(material/dialog): don't wait for animation before moving focus For a long time we used to move focus into the dialog... — committed to angular/components by crisbeto 2 years ago
- fix(material/dialog): don't wait for animation before moving focus (#24121) * fix(material/dialog): don't wait for animation before moving focus For a long time we used to move focus into the dialog... — committed to angular/components by crisbeto 2 years ago
- fix(material/dialog): don't wait for animation before moving focus (#24121) * fix(material/dialog): don't wait for animation before moving focus For a long time we used to move focus into the dialog... — committed to forsti0506/components by crisbeto 2 years ago
PR https://github.com/angular/components/pull/24121 has been tested and reviewed. It should land shortly and fix this.
This fix is included in 13.2.6 and 14.0.0-next.6.
FYI, StackBlitz now supports Angular 13. You can go ahead and make your repro if still needed.
Related StackBlitz issue comment: https://github.com/stackblitz/core/issues/1657#issuecomment-989779722
The fix will be in
@angular/material, but we haven’t made a release with the new code yet. It should be out later today/tomorrow.I reworked the fix for this on Friday to make it easier to merge and got it passing all the internal checks. It’ll be merged in on Monday and should be out in the next patch release.
Would like to know too when this PR is getting merged. We’re having a lot of problems with this issue at the moment 😢
Any updates?
@aikrez okay, I do have an update. There have been some undesirable side effects of this change in the presubmit tests. They are being investigated and potential solutions and workarounds are being evaluated.
Sure: https://stackblitz.com/edit/angular13-mat-dialog?file=src/app/app.component.ts https://stackblitz.com/edit/angular12-mat-dialog?file=src/app/app.component.ts
As you will notice “Open Dialog Async” doesn’t work in version 13 but in version 12. Opening a dialog directly after another one closes is a very common use case in our app since we started using Angular years ago.
I’ve could make a stackblitz example, it can be forked.
@Splaktar I tried but couldn’t. I think StackBlitz has some issue with Angular 13: https://github.com/stackblitz/core/issues/1657