fix(autocomplete): optionSelections not emitting when the list of options changes

Fixes the `MatAutocompleteTrigger.optionSelections` stopping to emit when the list options has been swapped out.

Fixes #14777.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -17,7 +17,7 @@ import {
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
-import {filter, take, switchMap, delay, tap, map} from 'rxjs/operators';
+import {filter, take, switchMap, delay, tap, map, startWith} from 'rxjs/operators';
 import {
   ChangeDetectorRef,
   Directive,
@@ -293,10 +293,15 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     );
   }
 
-  /** Stream of autocomplete option selections. */
+  /** Stream of changes to the selection state of the autocomplete options. */
   readonly optionSelections: Observable<MatOptionSelectionChange> = defer(() => {
-    if (this.autocomplete && this.autocomplete.options) {
-     return merge(...this.autocomplete.options.map(option => option.onSelectionChange));
+    const options = this.autocomplete ? this.autocomplete.options : null;
+
+    if (options) {
+      return options.changes.pipe(
+        startWith(options),
+        switchMap(() => merge(...options.map(option => option.onSelectionChange)))
+      );
     }
 
     // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
@@ -339,7 +344,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
 
   // Implemented as part of ControlValueAccessor.
   writeValue(value: any): void {
-    Promise.resolve(null).then(() => this._setTriggerValue(value));
+    Promise.resolve().then(() => this._setTriggerValue(value));
   }
 
   // Implemented as part of ControlValueAccessor.

src/lib/autocomplete/autocomplete.spec.ts

@@ -1714,6 +1714,34 @@ describe('MatAutocomplete', () => {
       subscription!.unsubscribe();
     }));
 
+    it('should emit to `optionSelections` if the list of options changes', fakeAsync(() => {
+      const spy = jasmine.createSpy('option selection spy');
+      const subscription = fixture.componentInstance.trigger.optionSelections.subscribe(spy);
+      const openAndSelectFirstOption = () => {
+        fixture.detectChanges();
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+        (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+      };
+
+      fixture.componentInstance.states = [{code: 'OR', name: 'Oregon'}];
+      fixture.detectChanges();
+
+      openAndSelectFirstOption();
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      fixture.componentInstance.states = [{code: 'WV', name: 'West Virginia'}];
+      fixture.detectChanges();
+
+      openAndSelectFirstOption();
+      expect(spy).toHaveBeenCalledTimes(2);
+
+      subscription!.unsubscribe();
+    }));
+
     it('should reposition the panel when the amount of options changes', fakeAsync(() => {
       let formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
       let inputReference = formField.querySelector('.mat-form-field-flex');