fix: prevent tooltip click and mousedown from bubbling to target (#10268)

Author: web-padawan

packages/tooltip/src/vaadin-tooltip-mixin.js

@@ -553,17 +553,11 @@ export const TooltipMixin = (superClass) =>
     }
 
     /** @private */
-    __onMouseDown(event) {
+    __onMouseDown() {
       if (this.manual) {
         return;
       }
 
-      // Do not close on bubbling mousedown events when
-      // the tooltip is slotted into the target element
-      if (event.composedPath().includes(this)) {
-        return;
-      }
-
       this._stateController.close(true);
     }
 
@@ -617,6 +611,20 @@ export const TooltipMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    __onOverlayMouseDown(event) {
+      // Prevent mousedown listeners from being called when
+      // the tooltip is slotted into the target element
+      event.stopPropagation();
+    }
+
+    /** @protected */
+    __onOverlayClick(event) {
+      // Prevent click listeners from being called when
+      // the tooltip is slotted into the target element
+      event.stopPropagation();
+    }
+
     /** @private */
     __handleMouseLeave() {
       if (this.manual) {

packages/tooltip/src/vaadin-tooltip.js

@@ -85,6 +85,8 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
         ?no-vertical-overlap="${this.__computeNoVerticalOverlap(effectivePosition)}"
         .horizontalAlign="${this.__computeHorizontalAlign(effectivePosition)}"
         .verticalAlign="${this.__computeVerticalAlign(effectivePosition)}"
+        @click="${this.__onOverlayClick}"
+        @mousedown="${this.__onOverlayMouseDown}"
         @mouseenter="${this.__onOverlayMouseEnter}"
         @mouseleave="${this.__onOverlayMouseLeave}"
         modeless

test/integration/component-tooltip.test.js

@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, mousedown, nextRender, tabKeyDown } from '@vaadin/testing-helpers';
+import sinon from 'sinon';
 import './not-animated-styles.js';
 import { AccordionPanel } from '@vaadin/accordion/src/vaadin-accordion-panel.js';
 import { Button } from '@vaadin/button/src/vaadin-button.js';
@@ -162,6 +163,27 @@ before(() => {
       expect(tooltipOverlay.opened).to.be.true;
     });
 
+    it('should not fire target click listeners on overlay click', () => {
+      const spy = sinon.spy();
+      tooltip.target.addEventListener('click', spy);
+
+      mouseenter(tooltip.target);
+      tooltipOverlay.click();
+
+      expect(spy.called).to.be.false;
+    });
+
+    it('should not fire target mousedown listeners on overlay mousedown', () => {
+      const spy = sinon.spy();
+      tooltip.target.addEventListener('mousedown', spy);
+
+      mouseenter(tooltip.target);
+      const content = tooltip.querySelector('[slot="overlay"]');
+      mousedown(content);
+
+      expect(spy.called).to.be.false;
+    });
+
     it('should set has-tooltip attribute on the element', () => {
       expect(element.hasAttribute('has-tooltip')).to.be.true;
     });