fix(overlay): unable to reset overlay size properties to initial value (#11592)

Fixes the consumer not being able to remove the various overlay sizing properties by setting them to null/an empty string, after they're added, without recreating the overlay. Note that these changes would technically let something like `false` through, but these cases will be caught by TS.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -264,29 +264,14 @@ export class OverlayRef implements PortalOutlet {
 
   /** Updates the size of the overlay element based on the overlay config. */
   private _updateElementSize() {
-    if (this._config.width || this._config.width === 0) {
-      this._pane.style.width = coerceCssPixelValue(this._config.width);
-    }
-
-    if (this._config.height || this._config.height === 0) {
-      this._pane.style.height = coerceCssPixelValue(this._config.height);
-    }
-
-    if (this._config.minWidth || this._config.minWidth === 0) {
-      this._pane.style.minWidth = coerceCssPixelValue(this._config.minWidth);
-    }
-
-    if (this._config.minHeight || this._config.minHeight === 0) {
-      this._pane.style.minHeight = coerceCssPixelValue(this._config.minHeight);
-    }
-
-    if (this._config.maxWidth || this._config.maxWidth === 0) {
-      this._pane.style.maxWidth = coerceCssPixelValue(this._config.maxWidth);
-    }
-
-    if (this._config.maxHeight || this._config.maxHeight === 0) {
-      this._pane.style.maxHeight = coerceCssPixelValue(this._config.maxHeight);
-    }
+    const style = this._pane.style;
+
+    style.width = coerceCssPixelValue(this._config.width);
+    style.height = coerceCssPixelValue(this._config.height);
+    style.minWidth = coerceCssPixelValue(this._config.minWidth);
+    style.minHeight = coerceCssPixelValue(this._config.minHeight);
+    style.maxWidth = coerceCssPixelValue(this._config.maxWidth);
+    style.maxHeight = coerceCssPixelValue(this._config.maxHeight);
   }
 
   /** Toggles the pointer events for the overlay pane element. */

src/cdk/overlay/overlay.spec.ts

@@ -165,7 +165,7 @@ describe('Overlay', () => {
 
     overlayRef.attach(componentPortal);
 
-    expect(overlayRef.hostElement.getAttribute('dir')).toEqual('rtl');
+    expect(overlayRef.hostElement.getAttribute('dir')).toBe('rtl');
   });
 
   it('should emit when an overlay is attached', () => {
@@ -375,7 +375,7 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.width).toEqual('500px');
+      expect(overlayRef.overlayElement.style.width).toBe('500px');
     });
 
     it('should support using other units if a string width is provided', () => {
@@ -384,7 +384,7 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.width).toEqual('200%');
+      expect(overlayRef.overlayElement.style.width).toBe('200%');
     });
 
     it('should apply the height set in the config', () => {
@@ -393,7 +393,7 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.height).toEqual('500px');
+      expect(overlayRef.overlayElement.style.height).toBe('500px');
     });
 
     it('should support using other units if a string height is provided', () => {
@@ -402,7 +402,7 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.height).toEqual('100vh');
+      expect(overlayRef.overlayElement.style.height).toBe('100vh');
     });
 
     it('should apply the min width set in the config', () => {
@@ -411,17 +411,16 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.minWidth).toEqual('200px');
+      expect(overlayRef.overlayElement.style.minWidth).toBe('200px');
     });
 
-
     it('should apply the min height set in the config', () => {
       config.minHeight = 500;
 
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.minHeight).toEqual('500px');
+      expect(overlayRef.overlayElement.style.minHeight).toBe('500px');
     });
 
     it('should apply the max width set in the config', () => {
@@ -430,7 +429,7 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.maxWidth).toEqual('200px');
+      expect(overlayRef.overlayElement.style.maxWidth).toBe('200px');
     });
 
 
@@ -440,7 +439,7 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.maxHeight).toEqual('500px');
+      expect(overlayRef.overlayElement.style.maxHeight).toBe('500px');
     });
 
     it('should support zero widths and heights', () => {
@@ -450,9 +449,45 @@ describe('Overlay', () => {
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      expect(overlayRef.overlayElement.style.width).toEqual('0px');
-      expect(overlayRef.overlayElement.style.height).toEqual('0px');
+      expect(overlayRef.overlayElement.style.width).toBe('0px');
+      expect(overlayRef.overlayElement.style.height).toBe('0px');
     });
+
+    it('should be able to reset the various size properties', () => {
+      config.minWidth = config.minHeight = 100;
+      config.width = config.height = 200;
+      config.maxWidth = config.maxHeight = 300;
+
+      const overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+      const style = overlayRef.overlayElement.style;
+
+      expect(style.minWidth).toBe('100px');
+      expect(style.minHeight).toBe('100px');
+      expect(style.width).toBe('200px');
+      expect(style.height).toBe('200px');
+      expect(style.maxWidth).toBe('300px');
+      expect(style.maxHeight).toBe('300px');
+
+      overlayRef.updateSize({
+        minWidth: '',
+        minHeight: '',
+        width: '',
+        height: '',
+        maxWidth: '',
+        maxHeight: ''
+      });
+
+      overlayRef.updatePosition();
+
+      expect(style.minWidth).toBeFalsy();
+      expect(style.minHeight).toBeFalsy();
+      expect(style.width).toBeFalsy();
+      expect(style.height).toBeFalsy();
+      expect(style.maxWidth).toBeFalsy();
+      expect(style.maxHeight).toBeFalsy();
+    });
+
   });
 
   describe('backdrop', () => {