fix(overlay): dimension not updated after init

Author: emoralesb05

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

@@ -141,6 +141,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.width).toEqual('250px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.width = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.width).toEqual('500px');
     });
 
     it('should set the height', () => {
@@ -150,6 +159,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.height).toEqual('100vh');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.height = '50vh';
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.height).toEqual('50vh');
     });
 
     it('should set the min width', () => {
@@ -159,6 +177,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.minWidth).toEqual('250px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.minWidth = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minWidth).toEqual('500px');
     });
 
     it('should set the min height', () => {
@@ -168,6 +195,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.minHeight).toEqual('500px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.minHeight = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minHeight).toEqual('500px');
     });
 
     it('should create the backdrop if designated', () => {

src/cdk/overlay/overlay-directives.ts

@@ -336,6 +336,14 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _attachOverlay() {
     if (!this._overlayRef) {
       this._createOverlay();
+    } else {
+      // Update the overlay size, in case the directive's inputs have changed
+      this._overlayRef.updateSize({
+        width: this.width,
+        minWidth: this.minWidth,
+        height: this.height,
+        minHeight: this.minHeight,
+      });
     }
 
     this._position.withDirection(this.dir);

src/lib/select/select.spec.ts

@@ -645,6 +645,33 @@ describe('MatSelect', () => {
         expect(() => fixture.componentInstance.select.open()).not.toThrow();
       });
 
+      it('should set the width of the overlay based on the trigger and resize', fakeAsync(() => {
+        trigger.style.width = '200px';
+        fixture.detectChanges();
+        flush();
+
+        trigger.click();
+        fixture.detectChanges();
+        const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        expect(pane.style.minWidth).toBe('200px',
+          'Expected pane minWidth to be 200px initially');
+
+        const backdrop =
+          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+        backdrop.click();
+        fixture.detectChanges();
+        flush();
+
+        trigger.style.width = '400px';
+        fixture.detectChanges();
+        flush();
+
+        trigger.click();
+        fixture.detectChanges();
+        expect(pane.style.minWidth).toBe('400px',
+          'Expected pane minWidth to be 400px after resize');
+      }));
+
       it('should open the panel when trigger is clicked', fakeAsync(() => {
         trigger.click();
         fixture.detectChanges();