diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 8ccea2c91341..f02d210c8b1b 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -410,6 +410,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { switchMap(() => { this._resetActiveItem(); this.autocomplete._setVisibility(); + + if (this.panelOpen) { + this._overlayRef!.updatePosition(); + } + return this.panelClosingActions; }), // when the first closing event occurs... diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index d98576933023..00a455bdde4e 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1538,6 +1538,39 @@ describe('MatAutocomplete', () => { subscription!.unsubscribe(); })); + it('should reposition the panel when the amount of options changes', fakeAsync(() => { + let formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; + let inputReference = formField.querySelector('.mat-form-field-flex'); + let input = inputReference.querySelector('input'); + + formField.style.bottom = '100px'; + formField.style.position = 'fixed'; + + typeInElement('Cali', input); + fixture.detectChanges(); + tick(); + zone.simulateZoneExit(); + fixture.detectChanges(); + + const inputBottom = inputReference.getBoundingClientRect().bottom; + const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!; + const panelTop = panel.getBoundingClientRect().top; + + expect(Math.floor(inputBottom)).toBe(Math.floor(panelTop), + `Expected panel top to match input bottom when there is only one option.`); + + typeInElement('', input); + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + const inputTop = inputReference.getBoundingClientRect().top; + const panelBottom = panel.getBoundingClientRect().bottom; + + expect(Math.floor(inputTop)).toBe(Math.floor(panelBottom), + `Expected panel switch to the above position if the options no longer fit.`); + })); + }); describe('panel closing', () => {