fix(overlay): incorrect bounding box styles if position is exactly zero (#10470)

Handles the edge case where the bounding box styles won't be set correctly, causing the overlay to jump to a wrong position, if either of its values works out to exactly zero.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -1187,6 +1187,109 @@ describe('FlexibleConnectedPositionStrategy', () => {
         window.scroll(0, 0);
         document.body.removeChild(veryLargeElement);
       });
+    it('should set the proper styles when the `bottom` value is exactly zero', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.bottom = '0';
+      originElement.style.left = '200px';
+
+      positionStrategy
+        .withFlexibleWidth()
+        .withFlexibleHeight()
+        .withPositions([{
+          overlayY: 'bottom',
+          overlayX: 'start',
+          originY: 'bottom',
+          originX: 'start'
+        }]);
+
+      attachOverlay({positionStrategy});
+
+      const boundingBox = overlayContainer
+        .getContainerElement()
+        .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement;
+
+      // Ensure that `0px` is set explicitly, rather than the
+      // property being left blank due to zero being falsy.
+      expect(boundingBox.style.bottom).toBe('0px');
+    });
+
+    it('should set the proper styles when the `top` value is exactly zero', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.top = '0';
+      originElement.style.left = '200px';
+
+      positionStrategy
+        .withFlexibleWidth()
+        .withFlexibleHeight()
+        .withPositions([{
+          overlayY: 'top',
+          overlayX: 'start',
+          originY: 'top',
+          originX: 'start'
+        }]);
+
+      attachOverlay({positionStrategy});
+
+      const boundingBox = overlayContainer
+        .getContainerElement()
+        .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement;
+
+      // Ensure that `0px` is set explicitly, rather than the
+      // property being left blank due to zero being falsy.
+      expect(boundingBox.style.top).toBe('0px');
+    });
+
+    it('should set the proper styles when the `left` value is exactly zero', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.left = '0';
+      originElement.style.top = '200px';
+
+      positionStrategy
+        .withFlexibleWidth()
+        .withFlexibleHeight()
+        .withPositions([{
+          overlayY: 'top',
+          overlayX: 'start',
+          originY: 'top',
+          originX: 'start'
+        }]);
+
+      attachOverlay({positionStrategy});
+
+      const boundingBox = overlayContainer
+        .getContainerElement()
+        .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement;
+
+      // Ensure that `0px` is set explicitly, rather than the
+      // property being left blank due to zero being falsy.
+      expect(boundingBox.style.left).toBe('0px');
+    });
+
+    it('should set the proper styles when the `right` value is exactly zero', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.right = '0';
+      originElement.style.top = '200px';
+
+      positionStrategy
+        .withFlexibleWidth()
+        .withFlexibleHeight()
+        .withPositions([{
+          overlayY: 'top',
+          overlayX: 'end',
+          originY: 'top',
+          originX: 'end'
+        }]);
+
+      attachOverlay({positionStrategy});
+
+      const boundingBox = overlayContainer
+        .getContainerElement()
+        .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement;
+
+      // Ensure that `0px` is set explicitly, rather than the
+      // property being left blank due to zero being falsy.
+      expect(boundingBox.style.right).toBe('0px');
+    });
 
   });
 

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -642,8 +642,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       styles.height = '100%';
     } else {
       styles.height = `${boundingBoxRect.height}px`;
-      styles.top = boundingBoxRect.top ? `${boundingBoxRect.top}px` : '';
-      styles.bottom = boundingBoxRect.bottom ? `${boundingBoxRect.bottom}px` : '';
+      styles.top = boundingBoxRect.top != null ? `${boundingBoxRect.top}px` : '';
+      styles.bottom = boundingBoxRect.bottom != null ? `${boundingBoxRect.bottom}px` : '';
     }
 
     if (!this._hasFlexibleWidth || this._isPushed) {
@@ -652,8 +652,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       styles.width = '100%';
     } else {
       styles.width = `${boundingBoxRect.width}px`;
-      styles.left = boundingBoxRect.left ? `${boundingBoxRect.left}px` : '';
-      styles.right = boundingBoxRect.right ? `${boundingBoxRect.right}px` : '';
+      styles.left = boundingBoxRect.left != null ? `${boundingBoxRect.left}px` : '';
+      styles.right = boundingBoxRect.right != null ? `${boundingBoxRect.right}px` : '';
     }
 
     const maxHeight = this._overlayRef.getConfig().maxHeight;