bug(select): Unable to update selected items in select with ReactiveForms

[nrone]

Reproduction

https://stackblitz.com/edit/angular-ivy-qak45m?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce:

1. Select multiple items in the MatSelect and see selected items listed below
2. Click on the item/items to remove them from the form
3. As seen, the selected items in the MatSelect are not updated to represent the new values in the form.

Expected Behavior

As of Angular 10 (i think, might be angular 9) this seems broken - prior to this - this have worked just fine. I have added a "normal" multiple select to show it works without the MatSelect. Useing setValue to the form works fine for MatInput as illustrated too.

Actual Behavior

The MatSelect does not update it's values when the forms values is changed.

Environment

• @angular/cdk10.2.3

• @angular/common10.1.3

• @angular/core10.1.3

• @angular/forms10.1.3

• @angular/material10.2.3

• Browser(s): Tested in Chrome@latests

[garrettld]

This appears to have been introduced by https://github.com/angular/components/pull/13598

Prior to that change, the call to _setSelectionByValue() was not gated by an equality check on the value. Now that it is behind the equality check, mutating the array and calling writeValue will not update the trigger text, even though the form value is updated.

In your example StackBlitz you're using values.splice(...). Using values.filter(...) or some other immutable operation that produces a new array should work around this. Here's an updated StackBlitz that works this way: https://stackblitz.com/edit/material-select-programmatic-change-fix?file=src/app/app.component.ts

I'm not sure if this is really a bug, since it only happens when mutating an array in place. Maybe someone from the material team can chime in.

[viniciusschuelter]

I agree, for me this is not a bug, a spread or a immutable operation should is the better approuch in this case, so to view can detect the changes. I recommend close this issue @jelbourn

[jelbourn]

Ack, going to close this based on feedback here and that it hasn't been further reported since 2020.

[angular-automatic-lock-bot[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.}