Components: Backdrop stays open after navigate using routerlink from inside mat dialog

Created on 20 Feb 2019 · 6Comments · Source: angular/components

What is the expected behavior?

When clicking an element with the routerLink directive, the navigation should close the dialog and make the backdrop disappear

What is the current behavior?

The dialog closes but the backdrop stays open.
Doesn't work even with closeOnNavigation: true or with applying mat-dialog-close to the element that has the routerLink directive

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Have an element with a routerLink directive inside a mat dialog template and click on it to navigate.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Core: 7.2.5
Angular Material: 7.3.2

Is there anything else we should know?

P4 animation materiadialog cannot reproduce needs clarification

Source

eyalhakim

👍6

Most helpful comment

Any news on this?

My current workaround:

private _dialogRef: MatDialogRef<ModalComponent> = null;

openDialog() {
    this._dialogRef = this._dialog.open(ModalComponent);
    this._dialogRef.afterClosed().subscribe(() => this._dialogRef = null);
}

ngOnDestroy() {
    if (this._dialogRef) {
        this._dialogRef.close();
    }
}

flensrocker on 21 Oct 2019

👍3

All 6 comments

Can you provide a reproduction in StackBlitz. This will help us to investigate the issue you are seeing.

josephperrott on 4 Jun 2019

I ran into this and found that the issue was that the dialogRef wasn't triggering ngOnDestroy when it moved to the new route.

Found something that seems to work - I wrapped the routerLink in an tag
From within the dialog:
<button mat-button [routerLink]="'newRoute'">GO SOMEWHERE</button>
To
<a [routerLink]="'newRoute'"><button mat-button >GO SOMEWHERE</button></a>

Early finding is that it seems to trigger a cleanup of the old components and creation of a new route tree - will add more if I see anything different.

goelinsights on 19 Jun 2019

reproduce: https://angular-h4uz66.stackblitz.io

flensrocker on 15 Jul 2019

Any news on this?

My current workaround:

private _dialogRef: MatDialogRef<ModalComponent> = null;

openDialog() {
    this._dialogRef = this._dialog.open(ModalComponent);
    this._dialogRef.afterClosed().subscribe(() => this._dialogRef = null);
}

ngOnDestroy() {
    if (this._dialogRef) {
        this._dialogRef.close();
    }
}

flensrocker on 21 Oct 2019

👍3

Closing because this issue has been inactive for 2 weeks or more after follow up was requested.