fix(autocomplete): not updating the size while the panel is open (#4346)

angular · May 9, 2017 · bfeb515 · bfeb515
1 parent 09c8404
commit bfeb515
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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 ' +