angular / angular/components

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

Ouverte
#27,331 2 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: material/dialog P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Clonez la reproduction liée et suivez les étapes de browser-back pour observer la boîte de dialogue et l’ordre du route guard. Commencez par suivre le comportement de MatDialog pendant la navigation en parallèle du guard canDeactivate ; le travail est terminé lorsque la boîte de dialogue reste ouverte quand la navigation est empêchée et ne se ferme qu’une fois la navigation réussie.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.