From bfeb515a2fc5afb95dbb50decfcb5d617f1f43f7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 9 May 2017 21:18:34 +0200 Subject: [PATCH] fix(autocomplete): not updating the size while the panel is open (#4346) --- 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 74c174aa3b7..4ecefc833b5 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -129,6 +129,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 47da3ffd3c0..7336516b6c5 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1145,7 +1145,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(); @@ -1157,8 +1157,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 ' +