@vaadin/overlay 24.3.9 → 24.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.3.9",
+  "version": "24.3.11",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.3.9",
-    "@vaadin/component-base": "~24.3.9",
-    "@vaadin/vaadin-lumo-styles": "~24.3.9",
-    "@vaadin/vaadin-material-styles": "~24.3.9",
-    "@vaadin/vaadin-themable-mixin": "~24.3.9"
+    "@vaadin/a11y-base": "~24.3.11",
+    "@vaadin/component-base": "~24.3.11",
+    "@vaadin/vaadin-lumo-styles": "~24.3.11",
+    "@vaadin/vaadin-material-styles": "~24.3.11",
+    "@vaadin/vaadin-themable-mixin": "~24.3.11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -48,5 +48,5 @@
     "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "89f71cc95b22840de910070c145f9cbf9714f4f4"
+  "gitHead": "890abeb0937416074456782aa90ed92c1bfe9cac"
 }

package/src/vaadin-overlay-mixin.js

@@ -220,12 +220,13 @@ export const OverlayMixin = (superClass) =>
       this._oldOwner = owner;
 
       const rendererChanged = this._oldRenderer !== renderer;
+      const hasOldRenderer = this._oldRenderer !== undefined;
       this._oldRenderer = renderer;
 
       const openedChanged = this._oldOpened !== opened;
       this._oldOpened = opened;
 
-      if (rendererChanged) {
+      if (rendererChanged && hasOldRenderer) {
         this.innerHTML = '';
         // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
         // When clearing the rendered content, this part needs to be manually disposed of.

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

@@ -146,7 +146,8 @@ export const PositionMixin = (superClass) =>
 
     /** @private */
     __addUpdatePositionEventListeners() {
-      window.addEventListener('resize', this._updatePosition);
+      window.visualViewport.addEventListener('resize', this._updatePosition);
+      window.visualViewport.addEventListener('scroll', this.__onScroll, true);
 
       this.__positionTargetAncestorRootNodes = getAncestorRootNodes(this.positionTarget);
       this.__positionTargetAncestorRootNodes.forEach((node) => {
@@ -156,7 +157,8 @@ export const PositionMixin = (superClass) =>
 
     /** @private */
     __removeUpdatePositionEventListeners() {
-      window.removeEventListener('resize', this._updatePosition);
+      window.visualViewport.removeEventListener('resize', this._updatePosition);
+      window.visualViewport.removeEventListener('scroll', this.__onScroll, true);
 
       if (this.__positionTargetAncestorRootNodes) {
         this.__positionTargetAncestorRootNodes.forEach((node) => {
@@ -204,9 +206,11 @@ export const PositionMixin = (superClass) =>
     /** @private */
     __onScroll(e) {
       // If the scroll event occurred inside the overlay, ignore it.
-      if (!this.contains(e.target)) {
-        this._updatePosition();
+      if (e.target instanceof Node && this.contains(e.target)) {
+        return;
       }
+
+      this._updatePosition();
     }
 
     _updatePosition() {

package/src/vaadin-overlay-styles.js

@@ -39,7 +39,8 @@ export const overlayStyles = css`
   }
 
   :host([hidden]),
-  :host(:not([opened]):not([closing])) {
+  :host(:not([opened]):not([closing])),
+  :host(:not([opened]):not([closing])) [part='overlay'] {
     display: none !important;
   }