fix(selection-list): preselected options not being added to the model value

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

@@ -549,7 +549,9 @@ describe('MatSelectionList with forms', () => {
       imports: [MatListModule, FormsModule, ReactiveFormsModule],
       declarations: [
         SelectionListWithModel,
-        SelectionListWithFormControl
+        SelectionListWithFormControl,
+        SelectionListWithPreselectedOption,
+        SelectionListWithPreselectedOptionAndModel
       ]
     });
 
@@ -696,6 +698,34 @@ describe('MatSelectionList with forms', () => {
         .toBe(true, 'Expected every list option to be unselected.');
     });
   });
+
+  describe('preselected values', () => {
+    it('should add preselected options to the model value', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SelectionListWithPreselectedOption);
+      const listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+          .map(optionDebugEl => optionDebugEl.componentInstance);
+
+      fixture.detectChanges();
+      tick();
+
+      expect(listOptions[1].selected).toBe(true);
+      expect(fixture.componentInstance.selectedOptions).toEqual(['opt2']);
+    }));
+
+    it('should handle preselected option both through the model and the view', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SelectionListWithPreselectedOptionAndModel);
+      const listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+          .map(optionDebugEl => optionDebugEl.componentInstance);
+
+      fixture.detectChanges();
+      tick();
+
+      expect(listOptions[0].selected).toBe(true);
+      expect(listOptions[1].selected).toBe(true);
+      expect(fixture.componentInstance.selectedOptions).toEqual(['opt1', 'opt2']);
+    }));
+
+  });
 });
 
 
@@ -819,3 +849,27 @@ class SelectionListWithModel {
 class SelectionListWithFormControl {
   formControl = new FormControl();
 }
+
+
+@Component({
+  template: `
+    <mat-selection-list [(ngModel)]="selectedOptions">
+      <mat-list-option value="opt1">Option 1</mat-list-option>
+      <mat-list-option value="opt2" selected>Option 2</mat-list-option>
+    </mat-selection-list>`
+})
+class SelectionListWithPreselectedOption {
+  selectedOptions: string[];
+}
+
+
+@Component({
+  template: `
+    <mat-selection-list [(ngModel)]="selectedOptions">
+      <mat-list-option value="opt1">Option 1</mat-list-option>
+      <mat-list-option value="opt2" selected>Option 2</mat-list-option>
+    </mat-selection-list>`
+})
+class SelectionListWithPreselectedOptionAndModel {
+  selectedOptions = ['opt1'];
+}

src/lib/list/selection-list.ts

@@ -163,13 +163,13 @@ export class MatListOption extends _MatListOptionMixinBase
   }
 
   ngOnInit() {
-    if (this.selected) {
+    if (this._selected) {
       // List options that are selected at initialization can't be reported properly to the form
       // control. This is because it takes some time until the selection-list knows about all
       // available options. Also it can happen that the ControlValueAccessor has an initial value
       // that should be used instead. Deferring the value change report to the next tick ensures
       // that the form control value is not being overwritten.
-      Promise.resolve(() => this.selected && this.selectionList._reportValueChange());
+      Promise.resolve().then(() => this.selected = true);
     }
   }