fix(overlay): dimension not updated after init (#8765)

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

@@ -140,6 +140,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', () => {
@@ -149,6 +158,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', () => {
@@ -158,6 +176,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', () => {
@@ -167,6 +194,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 = '250px';
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minHeight).toEqual('250px');
     });
 
     it('should create the backdrop if designated', () => {

src/cdk/overlay/overlay-directives.ts

@@ -383,6 +383,14 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
           this._detachOverlay();
         }
       });
+    } 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);