Components: Prevent back button routing if Dialog / SideNav is open

[SvenBudak]

We have already closeOnNavigation for Dialogs. That was a good start... But for make feeling a PWA like a native app we need more options to change also the routing a bit. 95% of users use the back button in my apps instead of the X button to close dialogs and sidenavs. the problem is that in background happens also a route change.

If Dialog or SideNav is open it should just close them without any route change.

[crisbeto]

I'm not sure that this would be practical to do inside Material, because we'd have to introduce a dependency to @angular/router. You should be able to achieve the same by creating a custom route guard that checks how many open dialogs you have, which is available in MatDialog.openDialogs.

[SvenBudak]

But isnt the goal from google to push PWAs? I am now in a situation that i cant create with Angular / Material a PWA that feels like a native App. I get your point, but i think more than 20% of the developers they using material, want to create a modern PWA. Ofc. i can try to find a developer who can write ma guardian like this, but this will not help all the other people. :)

[djleonskennedy]

@SvenBudak https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

[alexdabast]

Custom guard introduces a new issue.

Here is how to reproduce the issue on this stackblitz
https://angular-material-modal-guard.stackblitz.io/

What I did:
Create a custom CanDeactivate guard on all my routes.
The custom guard checks if any dialog is open an close them all and cancel the navigation.

if (this.dialog.openDialogs.length > 0) {
      this.dialog.closeAll();
      return false;
}
return true;

The issue:
Everything seems to work as expected but, if you hit a second time the back button of your browser once the modal has been closed by the guard, you do not navigate to your previous route but the second previous route.

Scenario:
You are on route "first"
You navigate to route "second"
You navigate to route "third"
You open the dialog
You close the dialog with the back button
Your hit the back button again

What you should expect is to land on route "second"
What happen you land on route "first"

[flensrocker]

See https://github.com/angular/angular/issues/15978

[SvenBudak]

Someone maybe have an idea to disable the back button until this is fixed? The app feel very strange with the default back routing.