bug(MatDialog): Closes before `canDeactivate` of route is checked on navigation
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Clone bản tái hiện được liên kết và làm theo các bước browser-back để quan sát hộp thoại và thứ tự của route guard. Bắt đầu bằng cách theo dõi hành vi của MatDialog trong quá trình điều hướng cùng với guard canDeactivate; được xem là hoàn tất khi hộp thoại vẫn mở nếu điều hướng bị ngăn chặn và chỉ đóng sau khi điều hướng thành công.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100