angular / angular/components

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

未关闭
#27,331 2 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
area: material/dialog P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

克隆链接的复现,并按照 browser-back 步骤观察对话框和 route guard 的顺序。首先跟踪导航期间 MatDialog 的行为,以及 canDeactivate guard 的行为;当导航被阻止时对话框仍保持打开,并且只有在导航成功后才关闭,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。