bug(mat-autocomplete): Removing the selected option manually adds a flicker in the dropdown rendering.

[aghosh-evertz]

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

Hi,

There is a requirement to add a 'clear'(X) icon sort of thing which basically should clear the data present in the mat-autocomplete field. Something like this:

Post MDC migration of our project, the selected options have started coming in blue color (mat-selected class getting added) which is fine. But since there is a custom function written for this clear-icon-click, although we set the control value to null/undefined and the value is updated properly in the control, still the selected classes are not getting removed. So, even if there is no option selected, the previously selected option still has the selected classes, when dropdown is opened. I used the hideSingleSelectionIndicator, hence tick is not present.

To counter this, I used the below code in my clear function :

this.autocompleteRef?.options.find((data: MatOption) => data.selected)?.deselect();

Now, on clearing the field, the field gets cleared properly and the 'selected-related' classes are removed from that option in the dropdown but a flickering thing happening.

How can we avoid it ???

Reproduction

Steps to reproduce:

1. Click on the field to open the drodown panel.
2. Select the first option from the dropdown. (cause this only happens with the first option)
3. Again try to click on the field so that dropdown opens with only that option in the dropdown.
4. While the dropdown panel is in opened state, click on the clear icon. It flickers the dropdown.

Below is the example:

Screencast.from.2025-03-26.19-30-11.webm

Expected Behavior

On clear icon click, it should re-open the dropdown with all the options without any flickering

Actual Behavior

On clear icon click, there is a flicker in the dropdown section and the autocomplete dropdown panel ultimately gets closed.

Environment

• "@angular/forms": "16.2.12",
• "@angular/material": "16.2.14",
• "@angular/cdk": "16.2.14",
• Browser(s): Chrome

[aghosh-evertz]

Also, why is the first option, when selected, turns into blue color (selected-class) while other options don't show this behaviour ?