refactor!: remove z-index update logic from bringToFront method (#9847)

web-padawan · web-flow · commit 5348f6fc5638 · 2025-07-31T16:31:10.000+03:00
diff --git a/packages/overlay/src/vaadin-overlay-stack-mixin.js b/packages/overlay/src/vaadin-overlay-stack-mixin.js
@@ -81,18 +81,6 @@ export const OverlayStackMixin = (superClass) =>
      * Brings the overlay as visually the frontmost one.
      */
     bringToFront() {
-      // Update z-index to be the highest among all attached overlays
-      // TODO: Can be removed after switching all overlays to be based on native popover
-      let zIndex = '';
-      const frontmost = getAttachedInstances()
-        .filter((o) => o !== this)
-        .pop();
-      if (frontmost) {
-        const frontmostZIndex = parseFloat(getComputedStyle(frontmost).zIndex);
-        zIndex = frontmostZIndex + 1;
-      }
-      this.style.zIndex = zIndex;
-
       // 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.
diff --git a/packages/overlay/test/multiple.test.js b/packages/overlay/test/multiple.test.js
@@ -228,16 +228,6 @@ describe('multiple overlays', () => {
       expect(overlay.scrollTop).to.equal(100);
     });
 
-    it('should grow the z-index by 1', () => {
-      modeless1.opened = true;
-      modeless2.opened = true;
-      modeless1.bringToFront();
-
-      const zIndex1 = parseFloat(getComputedStyle(modeless1).zIndex);
-      const zIndex2 = parseFloat(getComputedStyle(modeless2).zIndex);
-      expect(zIndex1).to.equal(zIndex2 + 1);
-    });
-
     it('should bring the newly opened overlay to front', () => {
       modeless1.opened = true;
       modeless2.opened = true;
@@ -250,20 +240,6 @@ describe('multiple overlays', () => {
       expect(frontmost).to.equal(modeless2);
     });
 
-    it('should reset z-indexes', () => {
-      modeless1.opened = true;
-      modeless2.opened = true;
-
-      const zIndex1 = parseFloat(getComputedStyle(modeless1).zIndex);
-      expect(parseFloat(modeless2.style.zIndex)).to.equal(zIndex1 + 1);
-
-      modeless1.opened = false;
-      modeless2.opened = false;
-
-      modeless2.opened = true;
-      expect(modeless2.style.zIndex).to.be.empty;
-    });
-
     it('should not call showPopover on bringToFront if only nested overlay is open', () => {
       modeless2.opened = true;
       modeless2.opened = true;
