fix(material/select): value not updated if the same array is updated …

…and re-assigned (#21625)

`mat-select` has an internal check that doesn't re-assign a value if the reference is the same.
This was meant primarily for primitives, but it ends up breaking the behavior for a
multi-select where the value is always an array.

These changes skip the check for a multi-select receiving a new array value.

Fixes #21583.

(cherry picked from commit cfbbbfe)

src/material-experimental/mdc-select/select.spec.ts

@@ -3768,6 +3768,30 @@ describe('MDC-based MatSelect', () => {
         .toEqual([true, true, true, true, false, false]);
     }));
 
+    it('should update the option selected state if the same array is mutated and passed back in',
+      fakeAsync(() => {
+        const value: string[] = [];
+        trigger.click();
+        testInstance.control.setValue(value);
+        fixture.detectChanges();
+
+        const optionNodes =
+            Array.from<HTMLElement>(overlayContainerElement.querySelectorAll('mat-option'));
+        const optionInstances = testInstance.options.toArray();
+
+        expect(optionNodes.some(option => {
+          return option.classList.contains('mdc-list-item--selected');
+        })).toBe(false);
+        expect(optionInstances.some(option => option.selected)).toBe(false);
+
+        value.push('eggs-5');
+        testInstance.control.setValue(value);
+        fixture.detectChanges();
+
+        expect(optionNodes[5].classList).toContain('mdc-list-item--selected');
+        expect(optionInstances[5].selected).toBe(true);
+      }));
+
   });
 
   it('should be able to provide default values through an injection token', fakeAsync(() => {

src/material/select/select.spec.ts

@@ -4666,6 +4666,28 @@ describe('MatSelect', () => {
         .toEqual([true, true, true, true, false, false]);
     }));
 
+    it('should update the option selected state if the same array is mutated and passed back in',
+      fakeAsync(() => {
+        const value: string[] = [];
+        trigger.click();
+        testInstance.control.setValue(value);
+        fixture.detectChanges();
+
+        const optionNodes =
+            Array.from<HTMLElement>(overlayContainerElement.querySelectorAll('mat-option'));
+        const optionInstances = testInstance.options.toArray();
+
+        expect(optionNodes.some(option => option.classList.contains('mat-selected'))).toBe(false);
+        expect(optionInstances.some(option => option.selected)).toBe(false);
+
+        value.push('eggs-5');
+        testInstance.control.setValue(value);
+        fixture.detectChanges();
+
+        expect(optionNodes[5].classList).toContain('mat-selected');
+        expect(optionInstances[5].selected).toBe(true);
+      }));
+
   });
 
   it('should be able to provide default values through an injection token', fakeAsync(() => {

src/material/select/select.ts

@@ -402,7 +402,8 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
   @Input()
   get value(): any { return this._value; }
   set value(newValue: any) {
-    if (newValue !== this._value) {
+    // Always re-assign an array, because it might have been mutated.
+    if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {
       if (this.options) {
         this._setSelectionByValue(newValue);
       }