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.
This commit is contained in:
Kristiyan Kostadinov
2018-03-20 22:48:04 +01:00
committed by Andrew Seguin
parent eefa9c4a64
commit 69217c4e43
2 changed files with 43 additions and 0 deletions
@@ -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'}
+40
View File
@@ -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();