fix(select): exception when initialized with large amount of options

Fixes an error being thrown by `mat-select` when it is initialized with a large amount of pre-selected options. The issue comes from the fact that we add a change listener right before the initial values are assigned rather than afterwards.

Fixes #12504.

Author: crisbeto

src/lib/select/select.spec.ts

@@ -2479,8 +2479,9 @@ describe('MatSelect', () => {
 
     it('should be able to programmatically select a falsy option', fakeAsync(() => {
       const fixture = TestBed.createComponent(FalsyValueSelect);
-
       fixture.detectChanges();
+      flush();
+
       fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
       fixture.componentInstance.control.setValue(0);
       fixture.detectChanges();
@@ -3031,6 +3032,8 @@ describe('MatSelect', () => {
 
         let groupFixture = TestBed.createComponent(SelectWithGroups);
         groupFixture.detectChanges();
+        flush();
+
         trigger = groupFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
         formField = groupFixture.debugElement.query(By.css('mat-form-field')).nativeElement;
 
@@ -3697,7 +3700,10 @@ describe('MatSelect', () => {
   });
 
   describe('with multiple selection', () => {
-    beforeEach(async(() => configureMatSelectTestingModule([MultiSelect])));
+    beforeEach(async(() => configureMatSelectTestingModule([
+      MultiSelect,
+      MultiSelectWithLotsOfPreselectedOptions
+    ])));
 
     let fixture: ComponentFixture<MultiSelect>;
     let testInstance: MultiSelect;
@@ -4051,6 +4057,17 @@ describe('MatSelect', () => {
       expect(testInstance.control.value).toEqual([]);
     });
 
+    it('should not throw with a large amount of preselected options', fakeAsync(() => {
+      fixture.destroy();
+
+      const lotsOfOptionsFixture = TestBed.createComponent(MultiSelectWithLotsOfPreselectedOptions);
+
+      expect(() => {
+        lotsOfOptionsFixture.detectChanges();
+        flush();
+      }).not.toThrow();
+    }));
+
   });
 });
 
@@ -4806,3 +4823,18 @@ class SelectWithoutOptionCentering {
 class SelectWithFormFieldLabel {
   placeholder: string;
 }
+
+
+@Component({
+  template: `
+    <mat-form-field>
+      <mat-select multiple [ngModel]="value">
+        <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  `
+})
+class MultiSelectWithLotsOfPreselectedOptions {
+  items = new Array(1000).fill(0).map((_, i) => i);
+  value = [...this.items];
+}

src/lib/select/select.ts

@@ -79,7 +79,6 @@ import {defer, merge, Observable, Subject} from 'rxjs';
 import {
   filter,
   map,
-  startWith,
   switchMap,
   take,
   takeUntil,
@@ -519,13 +518,16 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   ngAfterContentInit() {
     this._initKeyManager();
+    this._resetOptions();
 
-    this._selectionModel.onChange!.pipe(takeUntil(this._destroy)).subscribe(event => {
-      event.added.forEach(option => option.select());
-      event.removed.forEach(option => option.deselect());
+    this._initializeSelection().then(() => {
+      this._selectionModel.onChange!.pipe(takeUntil(this._destroy)).subscribe(event => {
+        event.added.forEach(option => option.select());
+        event.removed.forEach(option => option.deselect());
+      });
     });
 
-    this.options.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {
+    this.options.changes.pipe(takeUntil(this._destroy)).subscribe(() => {
       this._resetOptions();
       this._initializeSelection();
     });
@@ -779,10 +781,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return !this._selectionModel || this._selectionModel.isEmpty();
   }
 
-  private _initializeSelection(): void {
+  private _initializeSelection(): Promise<void> {
     // Defer setting the value in order to avoid the "Expression
     // has changed after it was checked" errors from Angular.
-    Promise.resolve().then(() => {
+    return Promise.resolve().then(() => {
       this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);
     });
   }