angular / angular/components

bug(mat-select): on openedChange, the panel value is wrong

Open
#31,529 1 comment 0 reactions 0 assignees View on GitHub
area: material/select P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

18.1.2

### Description

When triggering the event "openedChange," the panel value is defined when the panel is closed (openedChange emits `false`) and the panel value is undefined when the panel is open (openedChange emits `true`).

A current workaround is setting your logic based around the panel in a setTimeout function. My use case for this is setting an event listener on the scroll for the panel.

### Reproduction

StackBlitz link:
https://stackblitz.com/edit/brlpethk?file=src%2Fexample%2Fselect-custom-trigger-example.html
Steps to reproduce:
1. Open panel
2. See that the panel value is undefined
3. Close panel
4. See that the panel value is defined

### Expected Behavior

When the panel opens, the panel value should be defined

### Actual Behavior

The panel value is undefined

### Environment

- Angular: 19.2.14
- CDK/Material: 19.2.18
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Mac 14.7.6

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the mat-select handling around the openedChange event. Reproduce the open and close sequence in Firefox, then verify that the panel value is defined when opened and add or update coverage for the regression.

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
Mostly clear
Newbie friendliness
40/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.