angular / angular/components

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

Abierto
#27,331 2 comentarios 2 reacciones 0 asignados Ver en GitHub
area: material/dialog P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Clona la reproducción vinculada y sigue los pasos de browser-back para observar el diálogo y el orden del route guard. Empieza rastreando el comportamiento de MatDialog durante la navegación junto con el guard canDeactivate; el trabajo está terminado cuando el diálogo permanece abierto si se impide la navegación y se cierra solo después de que la navegación se complete correctamente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.