bug(mat-chip): mat-chip does not react to [selected] binding when the mat-chip-list also contains a formControl (e.g.) official autocomplete example

[tjosgood]

Reproduction

This example is copied directly from the official "Chips Autocomplete" example ([https://material.angular.io/components/chips/examples]). I have just stripped some of the unnecessary bits for a minimal example.

The example shows 3 copies of same mat-chip-list showing how mat-chips do not react to [selected] binding when a mat-input with either [formControl] or [matAutocomplete] bindings are included in the mat-chip-list.

All the existing chips should be selected in all copies. The only difference between the 3 is what bindings are included in the

https://components-issue-y2hda6.stackblitz.io

Steps to reproduce:

1. Create a mat-chip-list with mat-chips that have a [selected] binding (or just static flag set)
2. Add a with either [matAutocomplete] or [formControl]
3. The mat-chips no longer reflect their "selected" css styles (although appear to be internally in selected state)

Expected Behavior

For all chips to be selected in all copies

Actual Behavior

Presence of [formControl] or [matAutocomplete] prevents css styles being applied to selected chips

Environment

• Angular: 11.1.1
• All OS/Browser

[tjosgood]

A workaround I am using is to add [class.mat-chip-selected]="chip.selected" to the mat-chips i.e. same binding as the [selected] attribute to force the style to show up

[mmalerba]

It seems very likely that this is related to the same root cause as https://github.com/angular/components/issues/10968

[Rizwan-Raza]

Any solution? that workaround isn't working for me. Also I don't think they are internally selected. I logged them in ngAfterViewInit.

I'm using formControl on mat-chip-list with formControl value as "new FormControl('Some selected chip value')"

[Rizwan-Raza]

Actually,, when I add space around my chip value in FormControl argument, It works. Like in case of above. new FormControl(' Some selected chip value ') works 😑.

[Rizwan-Raza]

And for getting multiple pre selected chips I can pass array instead of string with value surrounded by a space. Like new FormControl([' Lemon ', ' Apple ', ' Lime ']); It's working. All I know, passing formControl in mat-chip-list overrides the selected attribute behaviour with the formControl passed value. So I go that way for resolution. I'm good to go now.