From 209ac66419a2bc11f2250fc659e06140de652548 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Mon, 1 May 2017 21:22:55 +0200 Subject: [PATCH] fix(autocomplete): not updating the size while the panel is open Fixes the autocomplete panel not being resized while it is open. It was due to it recalculating the width, but not calling `overlayRef.updateSize`. Fixes #4146. --- src/lib/autocomplete/autocomplete-trigger.ts | 1 + src/lib/autocomplete/autocomplete.spec.ts | 27 ++++++++++++++++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 391505afb55f..f8c7445a94a1 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -132,6 +132,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { } else { /** Update the panel width, in case the host width has changed */ this._overlayRef.getState().width = this._getHostWidth(); + this._overlayRef.updateSize(); } if (!this._overlayRef.hasAttached()) { diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index a9a1c8e6dc28..fdd97b9b64bc 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1146,7 +1146,7 @@ describe('MdAutocomplete', () => { const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; // Firefox, edge return a decimal value for width, so we need to parse and round it to verify - expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(300); + expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(300); widthFixture.componentInstance.trigger.closePanel(); widthFixture.detectChanges(); @@ -1158,8 +1158,31 @@ describe('MdAutocomplete', () => { widthFixture.detectChanges(); // Firefox, edge return a decimal value for width, so we need to parse and round it to verify - expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(500); + expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500); + }); + + it('should update the width while the panel is open', () => { + const widthFixture = TestBed.createComponent(SimpleAutocomplete); + + widthFixture.componentInstance.width = 300; + widthFixture.detectChanges(); + + widthFixture.componentInstance.trigger.openPanel(); + widthFixture.detectChanges(); + + const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + const input = widthFixture.debugElement.query(By.css('input')).nativeElement; + + expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(300); + + widthFixture.componentInstance.width = 500; + widthFixture.detectChanges(); + + input.focus(); + dispatchFakeEvent(input, 'input'); + widthFixture.detectChanges(); + expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500); }); it('should show the panel when the options are initialized later within a component with ' +