angular / angular/components

bug(Autocomplete): matAutocomplete with control initial value does not highlight value in options with check icon

Open
#29,422 7 comments 13 reactions 0 assignees View on GitHub
area: material/autocomplete 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

A MatAutocomplete field initialized with a control value does not highlight item in options

### Reproduction

StackBlitz link: https://stackblitz.com/edit/saqfud?file=src%2Fexample%2Fautocomplete-filter-example.ts,src%2Fexample%2Fautocomplete-filter-example.html,src%2Fexample%2Fautocomplete-filter-example.css
Steps to reproduce:
1. Set initial value of control (second one value for example)
```
options: string[] = ['One', 'Two', 'Three'];
myControl = new FormControl(this.options[1]);
```
3. click on input on UI

### Expected Behavior

Second one option is highlighted
![image](https://github.com/angular/components/assets/60134428/1d2c8684-8dc5-42dc-8433-7051b02926f6)

### Actual Behavior

second option is not highlighted
![image](https://github.com/angular/components/assets/60134428/635ef0d6-bf94-4523-b8b3-38014f7c2356)

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Contributor guide

Open the contributing guide

Research direction

Start by running the linked StackBlitz reproduction and inspect src/example/autocomplete-filter-example.ts and src/example/autocomplete-filter-example.html. Confirm that an initially selected value is present but its option is not highlighted when the input opens. Done means the second option is highlighted consistently for the provided initial FormControl value, with a regression test covering the behavior.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.