@vaadin/vaadin-overlay 23.3.0-alpha2 → 23.3.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-overlay",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,20 +35,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.3.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
+    "@vaadin/component-base": "23.3.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@polymer/iron-overlay-behavior": "^3.0.0",
-    "@vaadin/button": "23.3.0-alpha2",
-    "@vaadin/radio-group": "23.3.0-alpha2",
+    "@vaadin/button": "23.3.0-alpha3",
+    "@vaadin/radio-group": "23.3.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.3.0-alpha2",
+    "@vaadin/text-field": "23.3.0-alpha3",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
+  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
 }

package/src/vaadin-overlay-position-mixin.js

@@ -98,6 +98,7 @@ export const PositionMixin = (superClass) =>
     constructor() {
       super();
 
+      this.__onScroll = this.__onScroll.bind(this);
       this._updatePosition = this._updatePosition.bind(this);
     }
 
@@ -122,7 +123,7 @@ export const PositionMixin = (superClass) =>
 
       this.__positionTargetAncestorRootNodes = getAncestorRootNodes(this.positionTarget);
       this.__positionTargetAncestorRootNodes.forEach((node) => {
-        node.addEventListener('scroll', this._updatePosition, true);
+        node.addEventListener('scroll', this.__onScroll, true);
       });
     }
 
@@ -132,7 +133,7 @@ export const PositionMixin = (superClass) =>
 
       if (this.__positionTargetAncestorRootNodes) {
         this.__positionTargetAncestorRootNodes.forEach((node) => {
-          node.removeEventListener('scroll', this._updatePosition, true);
+          node.removeEventListener('scroll', this.__onScroll, true);
         });
         this.__positionTargetAncestorRootNodes = null;
       }
@@ -177,22 +178,19 @@ export const PositionMixin = (superClass) =>
       this._updatePosition();
     }
 
+    /** @private */
+    __onScroll(e) {
+      // If the scroll event occurred inside the overlay, ignore it.
+      if (!this.contains(e.target)) {
+        this._updatePosition();
+      }
+    }
+
     _updatePosition() {
       if (!this.positionTarget || !this.opened) {
         return;
       }
 
-      // Cleanup styles to avoid wrong values after window resize
-      // See https://github.com/vaadin/web-components/issues/4604
-      Object.assign(this.style, {
-        top: '',
-        right: '',
-        bottom: '',
-        left: '',
-        justifyContent: '',
-        alignItems: '',
-      });
-
       const targetRect = this.positionTarget.getBoundingClientRect();
 
       // Detect the desired alignment and update the layout accordingly
@@ -292,6 +290,44 @@ export const PositionMixin = (superClass) =>
       return defaultAlignStart === shouldGoToDefaultSide;
     }
 
+    /**
+     * Returns an adjusted value after resizing the browser window,
+     * to avoid wrong calculations when e.g. previously set `bottom`
+     * CSS property value is larger than the updated viewport height.
+     * See https://github.com/vaadin/web-components/issues/4604
+     */
+    __adjustBottomProperty(cssPropNameToSet, propNames, currentValue) {
+      let adjustedProp;
+
+      if (cssPropNameToSet === propNames.end) {
+        // Adjust horizontally
+        if (propNames.end === PROP_NAMES_VERTICAL.end) {
+          const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
+
+          if (currentValue > viewportHeight && this.__oldViewportHeight) {
+            const heightDiff = this.__oldViewportHeight - viewportHeight;
+            adjustedProp = currentValue - heightDiff;
+          }
+
+          this.__oldViewportHeight = viewportHeight;
+        }
+
+        // Adjust vertically
+        if (propNames.end === PROP_NAMES_HORIZONTAL.end) {
+          const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
+
+          if (currentValue > viewportWidth && this.__oldViewportWidth) {
+            const widthDiff = this.__oldViewportWidth - viewportWidth;
+            adjustedProp = currentValue - widthDiff;
+          }
+
+          this.__oldViewportWidth = viewportWidth;
+        }
+      }
+
+      return adjustedProp;
+    }
+
     /**
      * Returns an object with CSS position properties to set,
      * e.g. { top: "100px" }
@@ -299,15 +335,22 @@ export const PositionMixin = (superClass) =>
     // eslint-disable-next-line max-params
     __calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) {
       const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
+      const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;
 
       const currentValue = parseFloat(overlay.style[cssPropNameToSet] || getComputedStyle(overlay)[cssPropNameToSet]);
+      const adjustedValue = this.__adjustBottomProperty(cssPropNameToSet, propNames, currentValue);
 
       const diff =
         overlayRect[shouldAlignStart ? propNames.start : propNames.end] -
         targetRect[noOverlap === shouldAlignStart ? propNames.end : propNames.start];
 
+      const valueToSet = adjustedValue
+        ? `${adjustedValue}px`
+        : `${currentValue + diff * (shouldAlignStart ? -1 : 1)}px`;
+
       return {
-        [cssPropNameToSet]: `${currentValue + diff * (shouldAlignStart ? -1 : 1)}px`,
+        [cssPropNameToSet]: valueToSet,
+        [cssPropNameToClear]: '',
       };
     }
   };