fix(autocomplete): update overlay position when options are changed

Ensures that changes to the autocomplete options will cause the component to check that its current
overlay position is still within the viewport so that the overlay can fall back to the above
position, if necessary, while the panel is still open.

Fixes #11492

Author: benelliott

src/lib/autocomplete/autocomplete-trigger.ts

@@ -431,7 +431,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   private _subscribeToClosingActions(): Subscription {
     const firstStable = this._zone.onStable.asObservable().pipe(take(1));
     const optionChanges = this.autocomplete.options.changes.pipe(
-      tap(() => this._positionStrategy.reapplyLastPosition()),
+      // Adding/removing options may mean the overlay now exceeds the viewport,
+      // so update its position
+      tap(() => this._overlayRef!.updatePosition()),
       // Defer emitting to the stream until the next tick, because changing
       // bindings in here will cause "changed after checked" errors.
       delay(0)

src/lib/autocomplete/autocomplete.spec.ts

@@ -1932,6 +1932,34 @@ describe('MatAutocomplete', () => {
       });
     }));
 
+  it('should fall back to the above position if options are initialized while ' +
+    'the panel is open and there is not enough room to display them below', fakeAsync(() => {
+      let fixture = createComponent(AutocompleteWithOnPushDelay);
+      fixture.detectChanges();
+
+      let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+      let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
+
+      // Push the element down so it has a little bit of space, but not enough to render.
+      inputReference.style.bottom = '10px';
+      inputReference.style.position = 'fixed';
+
+      dispatchFakeEvent(inputEl, 'focusin');
+      tick(1000);
+
+      fixture.detectChanges();
+      tick();
+
+      Promise.resolve().then(() => {
+        const inputTop = inputReference.getBoundingClientRect().top;
+        const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+        const panelBottom = panel.getBoundingClientRect().bottom;
+
+        expect(Math.floor(inputTop))
+            .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
+      });
+    }));
+
   it('should emit an event when an option is selected', fakeAsync(() => {
     let fixture = createComponent(AutocompleteWithSelectEvent);