bug(CdkListbox): cdkOption requires additional event to rerender after list of options changed

[degloman]

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

When any option was selected in the list and than user filtered them somehow and back to the initial list, that selected option will be rendered incorrectly.

Screen.Recording.2024-04-05.at.12.49.58.mov

P.S. A bit similar problem was there: #28557

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xvgkha?file=src%2Findex.html,src%2Fmain.ts
Steps to reproduce:

1. Click "Ron" option (it becomes true)
2. Type in input letter "J"
3. Remove letter "J"
4. See that option "Ron" is false.
5. Type in input letter "R" or click outside input
6. See that option "Ron" is true.

Expected Behavior

Option should be rendered immediately based on its internal state (isSelected()/isActive()).

Actual Behavior

Option requires one more event to be rendered based on its internal state (isSelected()/isActive()).

Environment

• Angular: 17
• CDK/Material: 17.3.3
• Browser(s): Chrome and Safari
• Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

It seems like this flag isn't being updated as expected https://github.com/angular/components/blob/main/src/cdk/listbox/listbox.ts#L895.