refactor: make overlay bringToFront work with native popovers (#9746)

Author: sissbruecker

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

@@ -12,9 +12,9 @@ const attachedInstances = new Set();
  * @private
  */
 const getAttachedInstances = () =>
-  [...attachedInstances]
-    .filter((el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'))
-    .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+  [...attachedInstances].filter(
+    (el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'),
+  );
 
 /**
  * Returns all attached overlay instances excluding notification container,
@@ -87,16 +87,27 @@ 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 = frontmost.__zIndex;
+        const frontmostZIndex = parseFloat(getComputedStyle(frontmost).zIndex);
         zIndex = frontmostZIndex + 1;
       }
       this.style.zIndex = zIndex;
-      this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
+
+      // Update stacking order of native popover-based overlays
+      if (this.matches(':popover-open')) {
+        this.hidePopover();
+        this.showPopover();
+      }
+
+      // Update order of attached instances
+      this._removeAttachedInstance();
+      this._appendAttachedInstance();
 
       // If there is a nested overlay, call `bringToFront()` for it as well.
       if (overlayMap.has(this)) {

packages/overlay/test/multiple.test.js

@@ -317,6 +317,28 @@ describe('multiple overlays', () => {
       escKeyDown(input);
       expect(spy.called).to.be.false;
     });
+
+    describe('native popovers', () => {
+      beforeEach(() => {
+        modeless1.popover = 'manual';
+        modeless2.popover = 'manual';
+      });
+
+      it('should update stacking order when using bringToFront', () => {
+        modeless1.opened = true;
+        modeless1.showPopover();
+        modeless2.opened = true;
+        modeless2.showPopover();
+
+        modeless1.bringToFront();
+
+        expect(modeless1._last).to.be.true;
+
+        // Check that the overlay is also visually the frontmost
+        const frontmost = getFrontmostOverlayFromScreenCenter();
+        expect(frontmost).to.equal(modeless1);
+      });
+    });
   });
 
   describe('setNestedOverlay', () => {