Skip to content

Commit bfeb515

Browse files
crisbetokara
authored andcommitted
fix(autocomplete): not updating the size while the panel is open (#4346)
1 parent 09c8404 commit bfeb515

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
129129
} else {
130130
/** Update the panel width, in case the host width has changed */
131131
this._overlayRef.getState().width = this._getHostWidth();
132+
this._overlayRef.updateSize();
132133
}
133134

134135
if (!this._overlayRef.hasAttached()) {

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1145,7 +1145,7 @@ describe('MdAutocomplete', () => {
11451145

11461146
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
11471147
// Firefox, edge return a decimal value for width, so we need to parse and round it to verify
1148-
expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(300);
1148+
expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(300);
11491149

11501150
widthFixture.componentInstance.trigger.closePanel();
11511151
widthFixture.detectChanges();
@@ -1157,8 +1157,31 @@ describe('MdAutocomplete', () => {
11571157
widthFixture.detectChanges();
11581158

11591159
// Firefox, edge return a decimal value for width, so we need to parse and round it to verify
1160-
expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(500);
1160+
expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500);
1161+
});
1162+
1163+
it('should update the width while the panel is open', () => {
1164+
const widthFixture = TestBed.createComponent(SimpleAutocomplete);
1165+
1166+
widthFixture.componentInstance.width = 300;
1167+
widthFixture.detectChanges();
1168+
1169+
widthFixture.componentInstance.trigger.openPanel();
1170+
widthFixture.detectChanges();
1171+
1172+
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
1173+
const input = widthFixture.debugElement.query(By.css('input')).nativeElement;
1174+
1175+
expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(300);
1176+
1177+
widthFixture.componentInstance.width = 500;
1178+
widthFixture.detectChanges();
1179+
1180+
input.focus();
1181+
dispatchFakeEvent(input, 'input');
1182+
widthFixture.detectChanges();
11611183

1184+
expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500);
11621185
});
11631186

11641187
it('should show the panel when the options are initialized later within a component with ' +

0 commit comments

Comments
 (0)