refactor: do not call showPopover if only nested overlays are open (#9773)

Author: web-padawan

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

@@ -23,6 +23,24 @@ const getAttachedInstances = () =>
  */
 const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.overlay);
 
+/**
+ * Returns true if all the instances on top of the overlay are nested overlays.
+ * @private
+ */
+const hasOnlyNestedOverlays = (overlay) => {
+  const instances = getAttachedInstances();
+  const next = instances[instances.indexOf(overlay) + 1];
+  if (!next) {
+    return true;
+  }
+
+  if (!overlay._deepContains(next)) {
+    return false;
+  }
+
+  return hasOnlyNestedOverlays(next);
+};
+
 /**
  * Returns true if the overlay is the last one in the opened overlays stack.
  * @param {HTMLElement} overlay
@@ -99,6 +117,13 @@ export const OverlayStackMixin = (superClass) =>
       }
       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.
+      if (isLastOverlay(this) || hasOnlyNestedOverlays(this)) {
+        return;
+      }
+
       // Update stacking order of native popover-based overlays
       if (this.matches(':popover-open')) {
         this.hidePopover();

packages/overlay/test/multiple.test.js

@@ -338,6 +338,41 @@ describe('multiple overlays', () => {
         const frontmost = getFrontmostOverlayFromScreenCenter();
         expect(frontmost).to.equal(modeless1);
       });
+
+      it('should not call showPopover on bringToFront if only nested overlay is open', () => {
+        modeless2.opened = true;
+        modeless1.showPopover();
+        modeless2.opened = true;
+        modeless2.showPopover();
+
+        // Mimic nested overlays case
+        modeless1.appendChild(modeless2);
+
+        const showSpy1 = sinon.spy(modeless1, 'showPopover');
+        const showSpy2 = sinon.spy(modeless2, 'showPopover');
+
+        modeless1.bringToFront();
+
+        expect(showSpy1).to.be.not.called;
+        expect(showSpy2).to.be.not.called;
+
+        expect(modeless2._last).to.be.true;
+      });
+
+      it('should not call showPopover on bringToFront for the last open overlay', () => {
+        modeless2.opened = true;
+        modeless1.showPopover();
+        modeless2.opened = true;
+        modeless2.showPopover();
+
+        const showSpy2 = sinon.spy(modeless2, 'showPopover');
+
+        modeless2.bringToFront();
+
+        expect(showSpy2).to.be.not.called;
+
+        expect(modeless2._last).to.be.true;
+      });
     });
   });
 
@@ -362,6 +397,13 @@ describe('multiple overlays', () => {
             root.appendChild(btn);
           }
         };
+        el.opened = true;
+      });
+    });
+
+    afterEach(() => {
+      overlays.forEach((el) => {
+        el.opened = false;
       });
     });