angular / angular/components

bug(MatSelect): When panel is displayed inside a SideNav, it stays opened on Escape button

Đang mở
#30,507 3 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: material/select area: material/sidenav P3
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

Hi,

When using MatSelect inside a SideNav, if the panel is opened and we close the sideNav with the Escape button, the MatSelect panel stays opened.

I expected the same behavior like with the MatDatePicker, if the picker panel is opened, when using Escape the picker is closed first, and then using Escape again closes the sideNav.

I also provide the same sample inside a Dialog using the MatSelect and MatDatePicker and in this case, both works the same way and correctly.

The issue seems related to this one:
https://github.com/angular/components/issues/7981

Thanks

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-r9az1u4q
Steps to reproduce:
1. Click on button to open the SideNav
2. Open the MatSelect panel
3. Click on Escape

### Expected Behavior

MatSelect should be closed with the escape button instead of the SideNav

### Actual Behavior

SideNav is closed and MatSelect panel stays visible

### Environment

- Angular: 18 (same issue in 19)
- CDK/Material: 18 (same issue in 19)
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết và tái hiện chuỗi Escape trong các ví dụ SideNav, MatSelect và MatDatePicker. So sánh cách MatSelect xử lý Escape với hành vi của picker. Được xem là hoàn tất khi panel MatSelect đóng trước và một Escape tiếp theo đóng SideNav, bao gồm cả việc bao phủ setup đã được báo cáo.

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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
45/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.