Skip to content

Commit c92d8c9

Browse files
crisbetovivian-hu-zz
authored andcommitted
fix(overlay): update size if dimensions change in overlay directives (#14610)
Fixes the size of the overlay not being updated by the connected overlay directive, if it changes while open. This is required in order to handle cases like #7811.
1 parent 0394d59 commit c92d8c9

File tree

2 files changed

+24
-7
lines changed

2 files changed

+24
-7
lines changed

src/cdk/overlay/overlay-directives.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,24 @@ describe('Overlay directives', () => {
427427
expect(fixture.componentInstance.connectedOverlayDirective.push).toBe(true);
428428
});
429429

430+
it('should update the element size if it changes while open', () => {
431+
fixture.componentInstance.width = 250;
432+
fixture.componentInstance.height = 250;
433+
fixture.componentInstance.isOpen = true;
434+
fixture.detectChanges();
435+
436+
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
437+
expect(pane.style.width).toBe('250px');
438+
expect(pane.style.height).toBe('250px');
439+
440+
fixture.componentInstance.width = 100;
441+
fixture.componentInstance.height = 100;
442+
fixture.detectChanges();
443+
444+
expect(pane.style.width).toBe('100px');
445+
expect(pane.style.height).toBe('100px');
446+
});
447+
430448
});
431449

432450
describe('outputs', () => {

src/cdk/overlay/overlay-directives.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,12 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
247247
ngOnChanges(changes: SimpleChanges) {
248248
if (this._position) {
249249
this._updatePositionStrategy(this._position);
250+
this._overlayRef.updateSize({
251+
width: this.width,
252+
minWidth: this.minWidth,
253+
height: this.height,
254+
minHeight: this.minHeight,
255+
});
250256

251257
if (changes['origin'] && this.open) {
252258
this._position.apply();
@@ -349,13 +355,6 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
349355
this._createOverlay();
350356
} else {
351357
// Update the overlay size, in case the directive's inputs have changed
352-
this._overlayRef.updateSize({
353-
width: this.width,
354-
minWidth: this.minWidth,
355-
height: this.height,
356-
minHeight: this.minHeight,
357-
});
358-
359358
this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
360359
}
361360

0 commit comments

Comments
 (0)