feat: add internal API for nested overlays to bringToFront

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

@@ -28,6 +28,23 @@ const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.ove
  */
 export const isLastOverlay = (overlay) => overlay === getOverlayInstances().pop();
 
+const overlayMap = new WeakMap();
+
+/**
+ * Stores the reference to the nested overlay for given parent,
+ * or removes it when the nested overlay is null.
+ * @param {HTMLElement} parent
+ * @param {HTMLElement} nested
+ * @protected
+ */
+export const setNestedOverlay = (parent, nested) => {
+  if (nested != null) {
+    overlayMap.set(parent, nested);
+  } else {
+    overlayMap.delete(parent);
+  }
+};
+
 /**
  * @polymerMixin
  */
@@ -63,6 +80,11 @@ export const OverlayStackMixin = (superClass) =>
       }
       this.style.zIndex = zIndex;
       this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
+
+      // If there is a nested overlay, call `bringToFront()` for it as well.
+      if (overlayMap.has(this)) {
+        overlayMap.get(this).bringToFront();
+      }
     }
 
     /** @protected */

packages/overlay/test/multiple.test.js

@@ -2,6 +2,7 @@ import { expect } from '@vaadin/chai-plugins';
 import { click, escKeyDown, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-overlay.js';
+import { setNestedOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { createOverlay } from './helpers.js';
 
 describe('multiple overlays', () => {
@@ -317,4 +318,55 @@ describe('multiple overlays', () => {
       expect(spy.called).to.be.false;
     });
   });
+
+  describe('setNestedOverlay', () => {
+    let overlays;
+
+    beforeEach(() => {
+      overlays = Array.from(
+        fixtureSync(`
+        <div id="parent">
+          <vaadin-overlay modeless></vaadin-overlay>
+          <vaadin-overlay modeless></vaadin-overlay>
+          <vaadin-overlay modeless></vaadin-overlay>
+        </div>
+      `).children,
+      );
+      overlays.forEach((el, idx) => {
+        el.renderer = (root) => {
+          if (!root.firstChild) {
+            const btn = document.createElement('button');
+            btn.textContent = `Overlay ${idx}`;
+            root.appendChild(btn);
+          }
+        };
+      });
+    });
+
+    it('should bring nested overlays to front recursively', () => {
+      setNestedOverlay(overlays[0], overlays[1]);
+      setNestedOverlay(overlays[1], overlays[2]);
+
+      const bringToFrontSpy1 = sinon.spy(overlays[1], 'bringToFront');
+      const bringToFrontSpy2 = sinon.spy(overlays[2], 'bringToFront');
+
+      overlays[0].bringToFront();
+
+      expect(bringToFrontSpy1).to.be.calledOnce;
+      expect(bringToFrontSpy2).to.be.calledOnce;
+      expect(bringToFrontSpy2).to.be.calledAfter(bringToFrontSpy1);
+    });
+
+    it('should not bring nested overlay to front when resetting', () => {
+      setNestedOverlay(overlays[0], overlays[1]);
+
+      setNestedOverlay(overlays[0], null);
+
+      const bringToFrontSpy = sinon.spy(overlays[1], 'bringToFront');
+
+      overlays[0].bringToFront();
+
+      expect(bringToFrontSpy).to.be.not.called;
+    });
+  });
 });