From 69217c4e435cac59190c3e273f53efa39645e9a1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 20 Mar 2018 22:48:04 +0100
Subject: [PATCH] refactor(autocomplete): disable flexible positioning (#10469)

Removes the flexible positioning, which is on by default, from the autocomplete, because we don't want the panel to be flexible when it hits the edge of the viewport.
---
 src/lib/autocomplete/autocomplete-trigger.ts |  3 ++
 src/lib/autocomplete/autocomplete.spec.ts    | 40 ++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 8cc47fe453e..211c735608a 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -532,6 +532,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   private _getOverlayPosition(): PositionStrategy {
     this._positionStrategy = this._overlay.position()
       .flexibleConnectedTo(this._getConnectedElement())
+      .withFlexibleHeight(false)
+      .withFlexibleWidth(false)
+      .withPush(false)
       .withPositions([
         {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
         {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index f64614a6269..763e39c77ec 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1352,6 +1352,46 @@ describe('MatAutocomplete', () => {
           .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
     }));
 
+    it('should allow the panel to expand when the number of results increases', fakeAsync(() => {
+      let fixture = createComponent(SimpleAutocomplete);
+      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';
+
+      // Type enough to only show one option.
+      typeInElement('California', inputEl);
+      fixture.detectChanges();
+      tick();
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      let initialPanelHeight = panel.getBoundingClientRect().height;
+
+      fixture.componentInstance.trigger.closePanel();
+      fixture.detectChanges();
+
+      // Change the text so we get more than one result.
+      typeInElement('C', inputEl);
+      fixture.detectChanges();
+      tick();
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+
+      expect(panel.getBoundingClientRect().height).toBeGreaterThan(initialPanelHeight);
+    }));
+
     it('should align panel properly when filtering in "above" position', fakeAsync(() => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();