fix: only close popover on mouseleave if it is the last one (#7664)

Author: web-padawan

packages/popover/src/vaadin-popover.js

@@ -728,6 +728,12 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onTargetMouseLeave(event) {
+    // Do not close the popover on target focusout if the overlay is not the last one.
+    // This happens e.g. when opening the nested popover that uses non-modal overlay.
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
     if (this._overlayElement.contains(event.relatedTarget)) {
       return;
     }
@@ -794,6 +800,13 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onOverlayMouseLeave(event) {
+    // Do not close the popover on overlay focusout if it's not the last one.
+    // This happens when opening the nested component that uses "modal" overlay
+    // setting `pointer-events: none` on the body (combo-box, date-picker etc).
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
     if (event.relatedTarget === this.target) {
       return;
     }

packages/popover/test/nested.test.js

@@ -2,6 +2,7 @@ import { expect } from '@vaadin/chai-plugins';
 import { esc, fixtureSync, nextRender, nextUpdate, outsideClick } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-popover.js';
+import { mouseenter, mouseleave } from './helpers.js';
 
 describe('nested popover', () => {
   let popover, target, secondPopover, secondTarget;
@@ -122,4 +123,42 @@ describe('nested popover', () => {
       expect(popover.opened).to.be.true;
     });
   });
+
+  describe('hover', () => {
+    beforeEach(async () => {
+      popover.trigger = ['hover'];
+      await nextUpdate(popover);
+    });
+
+    it('should not close when mouse leaves the target if popover is not the last one', async () => {
+      mouseenter(target);
+      await nextRender();
+
+      mouseleave(target, secondTarget);
+      secondTarget.click();
+      await nextRender();
+
+      mouseleave(secondTarget, target);
+
+      mouseenter(target);
+      mouseleave(target);
+      await nextUpdate(popover);
+
+      expect(popover.opened).to.be.true;
+    });
+
+    it('should not close when mouse leaves the overlay if popover is not the last one', async () => {
+      mouseenter(target);
+      await nextRender();
+
+      mouseleave(target, secondTarget);
+      secondTarget.click();
+      await nextRender();
+
+      mouseleave(secondTarget);
+      await nextUpdate(popover);
+
+      expect(popover.opened).to.be.true;
+    });
+  });
 });