Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
kupchic opened this issue Jul 11, 2024 · 4 comments · May be fixed by #30861
Labels
area: material/autocomplete P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@kupchic
Copy link

kupchic commented Jul 11, 2024

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]);
  1. click on input on UI

Expected Behavior

Second one option is highlighted
image

Actual Behavior

second option is not highlighted
image

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
@kupchic kupchic added the needs triage This issue needs to be triaged by the team label Jul 11, 2024
@GCancinoH
Copy link

In your component, try this:

ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(this.myControl.value), <--- this
      map((value) => this._filter(value || ''))
    );
  }

and in the html
<mat-autocomplete [autoSelectActiveOption]="true" #auto="matAutocomplete" [autoActiveFirstOption]="true">

I guess that the icon just appears when you select by yourself an option. I checked the mat-autocomplete api and there's no way to do it. Also tried to add the [selected] in the mat-option without any good results.

@kupchic
Copy link
Author

kupchic commented Jul 14, 2024

#27652 Here was a bug fixing with resetting. In my opinion, it is a fair and very useful feature to set the initial value without all these steps described by @GCancinoH above.

@amysorto amysorto added P4 A relatively minor issue that is not relevant to core functions area: material/autocomplete and removed needs triage This issue needs to be triaged by the team labels Jul 29, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P4 A relatively minor issue that is not relevant to core functions labels Sep 9, 2024
@tp1906
Copy link

tp1906 commented Nov 24, 2024

In addition to this issue, I noticed if you attempt to capture the first and last options using the MatAutocomplete class, it retains the original values when the list was originally set and filtered. This used to work in Angular Material version 13/14 but no longer does. I do believe both of these issues have something to do with how options are set as selected.
choose-first-option.txt

@voi99
Copy link
Contributor

voi99 commented Feb 28, 2025

Any plans to fix this issue?

mistrykaran91 added a commit to mistrykaran91/components that referenced this issue Apr 14, 2025
…trol

Currently, when we have some initial value in formcontrol those are not marked as selected, this fix will check the initial value and if its matched, will be marked as selected.

Fixes angular#29422
mistrykaran91 added a commit to mistrykaran91/components that referenced this issue Apr 14, 2025
…trol

Currently, when we have some initial value in formcontrol those are not marked as selected, this fix will check the initial value and if its matched, will be marked as selected.

Fixes angular#29422
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/autocomplete P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants