From 4fdb546cecb257f6093ba51445d1e63aec207de4 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 23 Dec 2017 16:42:48 +0200
Subject: [PATCH] fix(selection-list): remove selected option from model value
 on destroy

Fixes selected options that are removed from the DOM not being removed from the model.

Relates to #9104.
---
 src/lib/list/selection-list.spec.ts | 19 ++++++++++++++++++-
 src/lib/list/selection-list.ts      |  6 ++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

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);
   }