angular / angular/components

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

Open
#30,507 3 comments 1 reaction 0 assignees View on GitHub
area: material/select area: material/sidenav P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and reproduce the Escape sequence in the SideNav, MatSelect, and MatDatePicker examples. Compare how MatSelect handles Escape with the picker behavior. Done means the MatSelect panel closes first and a subsequent Escape closes the SideNav, including coverage for the reported setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.