Skip to content

Commit 69217c4

Browse files
crisbetoandrewseguin
authored andcommitted
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.
1 parent eefa9c4 commit 69217c4

File tree

2 files changed

+43
-0
lines changed

2 files changed

+43
-0
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
532532
private _getOverlayPosition(): PositionStrategy {
533533
this._positionStrategy = this._overlay.position()
534534
.flexibleConnectedTo(this._getConnectedElement())
535+
.withFlexibleHeight(false)
536+
.withFlexibleWidth(false)
537+
.withPush(false)
535538
.withPositions([
536539
{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
537540
{originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1352,6 +1352,46 @@ describe('MatAutocomplete', () => {
13521352
.toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
13531353
}));
13541354

1355+
it('should allow the panel to expand when the number of results increases', fakeAsync(() => {
1356+
let fixture = createComponent(SimpleAutocomplete);
1357+
fixture.detectChanges();
1358+
1359+
let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
1360+
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
1361+
1362+
// Push the element down so it has a little bit of space, but not enough to render.
1363+
inputReference.style.bottom = '10px';
1364+
inputReference.style.position = 'fixed';
1365+
1366+
// Type enough to only show one option.
1367+
typeInElement('California', inputEl);
1368+
fixture.detectChanges();
1369+
tick();
1370+
1371+
fixture.componentInstance.trigger.openPanel();
1372+
fixture.detectChanges();
1373+
zone.simulateZoneExit();
1374+
1375+
let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
1376+
let initialPanelHeight = panel.getBoundingClientRect().height;
1377+
1378+
fixture.componentInstance.trigger.closePanel();
1379+
fixture.detectChanges();
1380+
1381+
// Change the text so we get more than one result.
1382+
typeInElement('C', inputEl);
1383+
fixture.detectChanges();
1384+
tick();
1385+
1386+
fixture.componentInstance.trigger.openPanel();
1387+
fixture.detectChanges();
1388+
zone.simulateZoneExit();
1389+
1390+
panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
1391+
1392+
expect(panel.getBoundingClientRect().height).toBeGreaterThan(initialPanelHeight);
1393+
}));
1394+
13551395
it('should align panel properly when filtering in "above" position', fakeAsync(() => {
13561396
let fixture = createComponent(SimpleAutocomplete);
13571397
fixture.detectChanges();

0 commit comments

Comments
 (0)