angular / angular/components

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

Đang mở
#27,331 2 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: material/dialog P4
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.