diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index 73b6b610d04..6dda57d768b 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/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); diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index 69fa3133188..eaa07da19b5 100644 --- a/src/lib/list/selection-list.ts +++ b/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()