angular / angular/components

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

Offen
#27,331 2 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/dialog P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Klone die verlinkte Reproduktion und folge den browser-back-Schritten, um den Dialog und die Reihenfolge des Route Guards zu beobachten. Beginne damit, das Verhalten von MatDialog während der Navigation zusammen mit dem canDeactivate-Guard nachzuverfolgen; abgeschlossen ist die Aufgabe, wenn der Dialog geöffnet bleibt, sobald die Navigation verhindert wird, und erst geschlossen wird, nachdem die Navigation erfolgreich war.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.