bug(Autocomplete): 'Selected' item is visually unset, even with the underlying control matching an option, due to filter editing

[bdirito]

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

It is possible to have an autocomplete where the current value of the underlying control value matches an option that is being displayed - but that option is not marked as selected.

Reproduction

StackBlitz link: https://stackblitz.com/edit/qdwgu9?file=package.json (an unmodified fork of the 'Require an autocomplete option to be selected' demo of autocomplete as on https://material.angular.io/components/autocomplete/examples)

Steps to reproduce:

1. Open the autocomplete and select 'One'
2. 
3. Delete out the 'n' & the 'e' to be left with a filter of 'O'; note that the 'myControl.value' is still One (due to having set requireSelection)
4. 
5. Delete out the final 'O' from your filter; note that 'myControl.value' is again still One
6. 
7. In this context even though myControl.value is still One and One is visible in the list of options it is no longer marked as selected

Expected Behavior

I would expect that when myControl.value matches a displayed option that option should be marked as selected. At least when requireSelection=true.

For requireSelection=false I would expect one of two options. Either it should snapshot the myControl.value on open for purposes of 'selected marking'; as is done for requireSelection=true. Or it should just update 'selected' according to the actual exact value of the underlying control. Overall the latter seems more in line with what is likely actually wanted (as the model is that option at that particular point in time).

Actual Behavior

As soon as the filter was reduced down to '' (empty string) the 'selected' value ui markings are removed.
This same behavior also occurs if you add to your filter string to no longer include your element of selection in the options list and then revert to something that does. (Ie a filter of One -> Onex -> One will have caused your 'selected' element to have been unset)

Once removed the 'selected' highlight and checkmark in the ui seems to ONLY be able to fixed by reselecting an element.

There seem to be several related bugs such as
selection indicator broken with mat-optgroup
updates to the control not being reflected in selection indicators
initial form control values are not reflected on selection indicators

This ticket is specifically about the causing the selection indicator ui to fail based on the editing of the filter but it seems likely that the same underlying library fix may apply to many if not all of these other tickets.

My current workarround

I am identifying the option I want 'selected' 'manually' and styling it appropriately. If you go this route make sure to set hideSingleSelectorIndicator to true as you do not want to deal with library provided checkmark that sometimes (but not always) shows up.

Environment

• Angular: 18.2.2
• CDK/Material: 18.2.2
• Browser(s): Chrome 126.0.6478.183
• Operating System (e.g. Windows, macOS, Ubuntu): macOs

[crisbeto]

Duplicate of #29422.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}