fix(list): deselect option if value doesn't match up (#14800)

Along the same lines as #14734. Deselects a selected list option, if its value is changed to something that doesn't match up with the group.

Author: crisbeto

src/lib/list/selection-list.spec.ts

@@ -982,6 +982,21 @@ describe('MatSelectionList with forms', () => {
         .toBe(true, 'Expected every list option to be unselected.');
     });
 
+    it('should deselect option whose value no longer matches', () => {
+      const option = listOptions[1];
+
+      fixture.componentInstance.formControl.setValue(['opt2']);
+      fixture.detectChanges();
+
+      expect(option.selected).toBe(true, 'Expected option to be selected.');
+
+      option.value = 'something-different';
+      fixture.detectChanges();
+
+      expect(option.selected).toBe(false, 'Expected option not to be selected.');
+      expect(fixture.componentInstance.formControl.value).toEqual([]);
+    });
+
     it('should mark options as selected when the value is set before they are initialized', () => {
       fixture.destroy();
       fixture = TestBed.createComponent(SelectionListWithFormControl);

src/lib/list/selection-list.ts

@@ -120,7 +120,16 @@ export class MatListOption extends _MatListOptionMixinBase
   @Input() checkboxPosition: 'before' | 'after' = 'after';
 
   /** Value of the option */
-  @Input() value: any;
+  @Input()
+  get value(): any { return this._value; }
+  set value(newValue: any) {
+    if (this.selected && newValue !== this.value) {
+      this.selected = false;
+    }
+
+    this._value = newValue;
+  }
+  private _value: any;
 
   /** Whether the option is disabled. */
   @Input()