bug(autocomplete): optionSelected and onChangeCallback is called before the animation completes

[niksus-src]

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

v16.1.8

Description

There is a _setValueAndClose method in the MatAutocompleteTrigger class that doesn't take into account the time to complete the animation, this has even been flagged todo but still not fixed. Currently, if we in optionSelected decide to clear the array used in ngFor for mat-option, we will get the array cleared before the panel closes and there will be a corresponding jump

@crisbeto

Reproduction

StackBlitz link: https://components-issue-v4ujjj.stackblitz.io
Steps to reproduce:

1. put the focus in the field
2. pick a value from the list

Expected Behavior

the optionSelected event will be called after the animation is complete, the menu will not jump after the array is cleared

Actual Behavior

optionSelected event was triggered without waiting for the animation to complete, clearing the array caused the panel to jump

Environment

• Angular: 16.2.12
• CDK/Material: 16.2.14
• Browser(s): google chrome v126.0.6478.127
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[GCancinoH]

I haven't checked the source code for autocomplete, but it looks more like an animation (I guess you're referring to the blue line being completed at focus and the blue line turning off when focus is lost).

Maybe you should go into the library itself and try to make the appearance a bit longer (for when someone focuses on the input or it loses focus).

[Harpush]

Any chance this will get fixed?