angular / angular/components

bug(mat-autocomplete): missing selection indicator (highlight + check icon) when using mat-autocomplete with mat-optgroup

Open
#29,189 1 comment 0 reactions 0 assignees View on GitHub
Accessibility area: material/autocomplete P4
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

14

### Description

v15 introduced an indicator of the currently selected item:
![image](https://github.com/angular/components/assets/32791888/3f1e8ce5-5d32-4503-afdf-1c0d859f7360)
However, this indicator is missing when, instead of flat mat-options, we're using mat-optgroup with mat-options:
![image](https://github.com/angular/components/assets/32791888/0049610c-767c-4ffe-9b18-d0ad7446a56f)

### Reproduction

The repro is even in the official documentation of any version higher than v14:
https://v15.material.angular.io/components/autocomplete/examples

### Expected Behavior

We should see the indicator of a selected item even when we're using mat-optgroup

### Actual Behavior

Missing selection indicator when using mat-autocomplete with mat-optgroup

### Environment

- Angular: v15+
- CDK/Material: v15+

Contributor guide

Open the contributing guide

Research direction

Start with the autocomplete examples linked in the issue and compare the flat mat-options case with the mat-optgroup case. Reproduce the missing highlight and check icon on Angular/Material v15+, then verify that the selected-item indicator appears for grouped options as well.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.