diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index cb597e1d6ee6..a072545b7002 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/src/lib/list/selection-list.spec.ts @@ -675,6 +675,22 @@ describe('MatSelectionList with forms', () => { expect(ngModel.pristine) .toBe(false, 'Expected the selection-list to be dirty after state change.'); })); + + it('should remove a selected option from the value on destroy', fakeAsync(() => { + listOptions[1].selected = true; + listOptions[2].selected = true; + + fixture.detectChanges(); + + expect(fixture.componentInstance.selectedOptions).toEqual(['opt2', 'opt3']); + + fixture.componentInstance.renderLastOption = false; + fixture.detectChanges(); + tick(); + + expect(fixture.componentInstance.selectedOptions).toEqual(['opt2']); + })); + }); describe('and formControl', () => { @@ -869,11 +885,12 @@ class SelectionListWithTabindexBinding { Option 1 Option 2 - Option 3 + Option 3 ` }) class SelectionListWithModel { selectedOptions: string[] = []; + renderLastOption = true; } @Component({ diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index c72638770f0a..55217a479e8d 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -178,6 +178,12 @@ export class MatListOption extends _MatListOptionMixinBase } ngOnDestroy(): void { + if (this.selected) { + // We have to delay this until the next tick in order + // to avoid changed after checked errors. + Promise.resolve().then(() => this.selected = false); + } + this.selectionList._removeOptionFromList(this); }