mat-selection-list list-options don't update when formControl for mat-selection-list is updated with setValue

[MikaAK]

Bug, feature request, or proposal:

Using mat-selection-list you can provide a formControl such as

 mat-selection-list([formControl]='myControl')

which will load the myControl.value with ["MY_VALUE", "MY_VALUE2"]
However when using myControl.setValue(["MY_VALUE", "MY_VALUE2"]) from an input it doesn't cause the checkboxes to be updated!

What is the expected behavior?

Checkboxes should update

What is the current behavior?

Checkboxes do not update

What are the steps to reproduce?

https://angular-material2-issue-bvbjdy.stackblitz.io

What is the use-case or motivation for changing an existing behavior?

When using display components it's good to have inputs controlling these, however this blocks us from passing in values from the outside

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: 5.x.x
Angular: 5.x.x

[crisbeto]

Thanks for the report, there's a PR that should fix the issue. Until the fix gets in you should be able to work around it by setting the initial value either inside ngAfterContentInit or a setTimeout.

[MikaAK]

Awesome thanks guys!

[mtholdefer]

I seem to be having this same issue for <mat-select> with the multiple property.
myFormControl.setValue( [ obj1, obj2, ...] ) does not update the selected checkboxes in the browser, however when logged the value seems to be correct.

[crisbeto]

Can you post an example @mtholdefer? You can use this as a starting point. Also keep in mind that the objects might not be getting selected, because mat-select compares them by reference.

[mtholdefer]

Here you go: https://stackblitz.com/edit/angular-material2-issue-vagkp7?file=app/app.component.html

Below the button is the value on the FormControl object. It begins with everything in the list(so everything is selected). When the button is clicked, I update the FormControl object to contain a partial list. After this update are no selected items in the DOM, despite the FormControl value containing 4 elements.

[crisbeto]

That's because mat-select compares the selected values by reference and when you add the new array of columns, you also create brand new objects. You can get it working by using the compareWith input that allows you to have custom logic for determining what value is selected. Here's a working fork of your example.

[mtholdefer]

Ahh thank you very much for the solution.

[EmilienRamos]

Guys !
I know I'm late ^^
I'm having this issue too, with mat-selection-list and mat-list-option.

What I have
editor.html

<mat-selection-list formControlName="role">
    <mat-list-option checkboxPosition="before" *ngFor="let role of roles" [value]="role.id">{{ role.attributes.name }}</mat-list-option>
</mat-selection-list>

editor.ts (onInit)

this.form = this.fb.group({
    role: [[...this.user.attributes.role], Validators.required],
});

this.user.attributes.role is an array of string.

I tried

ngAfterContentInit() {
    this.form.patchValue({
        'role': [...this.user.attributes.role]
    });
}

I also tried

ngAfterContentInit() {
    setTimeout(() => {
      this.form.patchValue({
        'role': [...this.user.attributes.role]
      });
      console.log(this.form.value.role);
    }, 1000);
}

Note that I'm getting roles with an observable :

combineLatest(
      // Others observables ...
      this.jsonApi.all('roles').pipe(map(document => document.data)),
    ).subscribe(([firms, langs, roles]) => {
      // Others observables ...
      this.roles = roles;
    });

In fact, no mat-list-option is selected, however, one of them should be selected
Am I doing something wrong ?

[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.}