bug(mat-select): FormControl change not reflected in display

[TheWalnutEffect]

Reproduction

HTML
...
          <mat-select multiple formControlName="splitTypes">
            <mat-option *ngFor="let item of filteredSplitTypes" [value]="item.id">
              {{item.name}}
            </mat-option>
          </mat-select>
...

TS
...

      splitTypeControl.setValue(newSelectionsArray);
...

Steps to reproduce:

1. Only tested when multiple select enabled. Set the value on the control.
2. The mat-select display does not update.

Expected Behavior

What behavior were you expecting to see?
The display should update, and it did until v10.1.2

Actual Behavior

What behavior did you actually see?
The display does not change.

Environment

• Angular: 10.2.4
• CDK/Material: 10.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Can you provide a Stackblitz that shows it breaking? You can fork one of the examples from material.angular.io. If I had to guess, it could be one of these issues:

• Is change detection triggered after the setValue call? It's possible that the view just isn't up-to-date.
• If the value of each of the options is an object, it could end up not matching if the object is swapped out.

[TheWalnutEffect]

https://stackblitz.com/edit/components-issue-2jvqu5?file=src%2Fapp%2Fexample-component.html

I have managed to fix this issue now.

Before material v10.1.2 I was able to get the value of the select, update the array then set the same array back to the select and this would update the UI (as in my "setValue" method).

I have now fixed this by slicing the value array (to create a new array ref) before setting it back (in my "setValueAlt" method).

[crisbeto]

Thank you, that's definitely a bug on our end.