@vaadin/overlay 25.1.8 → 25.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.1.8",
+  "version": "25.1.10",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.1.8",
-    "@vaadin/component-base": "~25.1.8",
-    "@vaadin/vaadin-themable-mixin": "~25.1.8",
+    "@vaadin/a11y-base": "~25.1.10",
+    "@vaadin/component-base": "~25.1.10",
+    "@vaadin/vaadin-themable-mixin": "~25.1.10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.1.8",
-    "@vaadin/chai-plugins": "~25.1.8",
-    "@vaadin/test-runner-commands": "~25.1.8",
+    "@vaadin/aura": "~25.1.10",
+    "@vaadin/chai-plugins": "~25.1.10",
+    "@vaadin/test-runner-commands": "~25.1.10",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.1.8",
+    "@vaadin/vaadin-lumo-styles": "~25.1.10",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "284962838c38ec84495ea097b97d6d03cad2069b"
+  "gitHead": "941297a1015ae11bb75d90c0b3c52302e741a528"
 }

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

@@ -119,6 +119,11 @@ export const PositionMixin = (superClass) =>
     constructor() {
       super();
 
+      /**
+       * Used for mixin detection because `instanceof` does not work with mixins.
+       */
+      this._hasOverlayPositionMixin = true;
+
       this.__onScroll = this.__onScroll.bind(this);
       this._updatePosition = this._updatePosition.bind(this);
     }

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

@@ -14,23 +14,27 @@ const attachedInstances = new Set();
 const getAttachedInstances = () => [...attachedInstances].filter((el) => !el.hasAttribute('closing'));
 
 /**
- * Returns true if all the instances on top of the overlay are nested overlays.
- * @private
+ * Returns overlays shown on top of the given overlay.
+ * @param {HTMLElement} overlay
+ * @return {HTMLElement[]}
+ * @protected
  */
-export const hasOnlyNestedOverlays = (overlay) => {
+export const getOverlaysOnTop = (overlay) => {
   const instances = getAttachedInstances();
-  const next = instances[instances.indexOf(overlay) + 1];
-  if (!next) {
-    return true;
-  }
-
-  if (!overlay._deepContains(next)) {
-    return false;
-  }
-
-  return hasOnlyNestedOverlays(next);
+  const index = instances.indexOf(overlay);
+  // The overlay is not in the visible stack (closing), so nothing is "on top" of it.
+  return index === -1 ? [] : instances.slice(index + 1);
 };
 
+/**
+ * Returns true if the given overlay is a child of a parent overlay.
+ * @param {HTMLElement} parent
+ * @param {HTMLElement} overlay
+ * @return {boolean}
+ * @protected
+ */
+export const isNestedOverlay = (parent, overlay) => parent._deepContains(overlay);
+
 /**
  * Returns true if the overlay is the last one in the opened overlays stack.
  * @param {HTMLElement} overlay
@@ -72,22 +76,28 @@ export const OverlayStackMixin = (superClass) =>
      * Brings the overlay as visually the frontmost one.
      */
     bringToFront() {
-      // If the overlay is the last one, or if all other overlays shown above
-      // are nested overlays (e.g. date-picker inside a dialog), do not call
-      // `showPopover()` unnecessarily to avoid scroll position being reset.
-      if (isLastOverlay(this) || hasOnlyNestedOverlays(this)) {
+      if (isLastOverlay(this)) {
         return;
       }
 
-      // Update stacking order of native popover-based overlays
-      if (this.matches(':popover-open')) {
-        this.hidePopover();
-        this.showPopover();
+      const overlays = getOverlaysOnTop(this);
+      // Nested positioned overlays anchored must stay visually on top.
+      const nestedOverlays = overlays.filter((el) => el._hasOverlayPositionMixin && isNestedOverlay(this, el));
+
+      // If the only overlays on top are nested positioned overlays, this overlay is already
+      // effectively frontmost. Skip to avoid resetting scroll position via `showPopover()`.
+      if (nestedOverlays.length === overlays.length) {
+        return;
       }
 
-      // Update order of attached instances
-      this._removeAttachedInstance();
-      this._appendAttachedInstance();
+      [this, ...nestedOverlays].forEach((overlay) => {
+        if (overlay.matches(':popover-open')) {
+          overlay.hidePopover();
+          overlay.showPopover();
+        }
+        overlay._removeAttachedInstance();
+        overlay._appendAttachedInstance();
+      });
     }
 
     /** @protected */