Skip to content

Commit a7c4d0c

Browse files
crisbetojosephperrott
authored andcommitted
fix(autocomplete): reposition the panel when the amount of options changes (#4469)
1 parent 8f3b316 commit a7c4d0c

File tree

2 files changed

+38
-0
lines changed

2 files changed

+38
-0
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
453453
switchMap(() => {
454454
this._resetActiveItem();
455455
this.autocomplete._setVisibility();
456+
457+
if (this.panelOpen) {
458+
this._overlayRef!.updatePosition();
459+
}
460+
456461
return this.panelClosingActions;
457462
}),
458463
// when the first closing event occurs...

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1606,6 +1606,39 @@ describe('MatAutocomplete', () => {
16061606
subscription!.unsubscribe();
16071607
}));
16081608

1609+
it('should reposition the panel when the amount of options changes', fakeAsync(() => {
1610+
let formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
1611+
let inputReference = formField.querySelector('.mat-form-field-flex');
1612+
let input = inputReference.querySelector('input');
1613+
1614+
formField.style.bottom = '100px';
1615+
formField.style.position = 'fixed';
1616+
1617+
typeInElement('Cali', input);
1618+
fixture.detectChanges();
1619+
tick();
1620+
zone.simulateZoneExit();
1621+
fixture.detectChanges();
1622+
1623+
const inputBottom = inputReference.getBoundingClientRect().bottom;
1624+
const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
1625+
const panelTop = panel.getBoundingClientRect().top;
1626+
1627+
expect(Math.floor(inputBottom)).toBe(Math.floor(panelTop),
1628+
`Expected panel top to match input bottom when there is only one option.`);
1629+
1630+
typeInElement('', input);
1631+
fixture.detectChanges();
1632+
tick();
1633+
fixture.detectChanges();
1634+
1635+
const inputTop = inputReference.getBoundingClientRect().top;
1636+
const panelBottom = panel.getBoundingClientRect().bottom;
1637+
1638+
expect(Math.floor(inputTop)).toBe(Math.floor(panelBottom),
1639+
`Expected panel switch to the above position if the options no longer fit.`);
1640+
}));
1641+
16091642
});
16101643

16111644
describe('panel closing', () => {

0 commit comments

Comments
 (0)