fix: do not reopen popover when clicking target (#9979) (#10398)

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: web-padawan

packages/popover/src/vaadin-popover-overlay.js

@@ -134,6 +134,20 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
   _shouldAddGlobalListeners() {
     return true;
   }
+
+  /**
+   * Override method from `OverlayMixin` to prevent closing when clicking on target.
+   * Clicking the target will already close the popover when using the click trigger.
+   *
+   * @override
+   * @protected
+   */
+  _shouldCloseOnOutsideClick(event) {
+    if (event.composedPath().includes(this.positionTarget)) {
+      return false;
+    }
+    return super._shouldCloseOnOutsideClick(event);
+  }
 }
 
 defineCustomElement(PopoverOverlay);

packages/popover/test/basic.test.js

@@ -1,4 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
+import { resetMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { esc, fixtureSync, nextRender, nextUpdate, oneEvent, outsideClick } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-popover.js';
@@ -246,6 +247,10 @@ describe('popover', () => {
       await nextUpdate(popover);
     });
 
+    afterEach(async () => {
+      await resetMouse();
+    });
+
     it('should open overlay on target click by default', async () => {
       target.click();
       await oneEvent(overlay, 'vaadin-overlay-open');
@@ -256,7 +261,10 @@ describe('popover', () => {
       target.click();
       await oneEvent(overlay, 'vaadin-overlay-open');
 
-      target.click();
+      // Use browser command here to test for possible side effects between the outside click listener and the
+      // target opened toggle behavior. Using browser commands for opening the popover doesn't work consistently as
+      // the opened event might fire before the click promise resolves.
+      await sendMouseToElement({ type: 'click', element: target });
       await nextRender();
       expect(overlay.opened).to.be.false;
     });