diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index 092bbd1e3acf..1bde87970a6c 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/src/lib/list/selection-list.spec.ts @@ -650,6 +650,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', () => { @@ -800,11 +816,12 @@ class SelectionListWithTabindexBinding { <mat-selection-list [(ngModel)]="selectedOptions"> <mat-list-option value="opt1">Option 1</mat-list-option> <mat-list-option value="opt2">Option 2</mat-list-option> - <mat-list-option value="opt3">Option 3</mat-list-option> + <mat-list-option value="opt3" *ngIf="renderLastOption">Option 3</mat-list-option> </mat-selection-list>` }) class SelectionListWithModel { selectedOptions: string[] = []; + renderLastOption = true; } @Component({ diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index 274a7ca4b5d6..7e4631cdb4c8 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); }