bug(MatDialog): Closes before `canDeactivate` of route is checked on navigation

[TheSlimvReal]

trafficstars

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

I want to prevent navigation while a dialog is open. For this I am using a canDeactivate guard on the route which checks if there is an open dialog. The problem is now that when using the browser back button then the popup is already closed before the canDeactivate guard is even checked. This then results in the behaviour that the popup is closed even when no navigation happens.

I know there is the closeOnNavigation option but I only want to prevent navigation and the dialog from closing in certain cases (e.g. unsaved changes in a popup).

Reproduction

Clone https://github.com/TheSlimvReal/angular-dialog-route-guard.git (does not work in Stackblitz because the back button triggers a page reload there) Steps to reproduce:

1. Click First
2. Click Dialog
3. Click the back button of browser

The app will route to second even though the canDeactivate guard is checking whether a dialog is open. This is because the dialog is closed before route guards are checked.

Expected Behavior

The dialog should only close if navigation actually happens.

Actual Behavior

The dialog is always closed.

Environment

Angular CLI: 16.1.0 Node: 16.16.0 Package Manager: npm 8.17.0 OS: darwin x64

Angular: 16.1.1 ... animations, cdk, common, compiler, compiler-cli, core, forms ... material, platform-browser, platform-browser-dynamic, router

[raskyer]

Is there any news around this ?

[seyfert]

I ran into this issue today. I believe it is because OverlayRef in the cdk disposes the overlay on navigation changes using Location.subscribe(). But this emits a location change regardless of whether the navigation was successful.

Maybe we need to create something like RouterOverlayRef that relies on the angular router instead of location?