fix(tooltip): not show tooltip when target is clicked

Author: RivaIvanova

src/components/tooltip/controller.ts

@@ -133,6 +133,10 @@ class TooltipController implements ReactiveController {
     for (const each of this._hideTriggers) {
       addWeakEventListener(anchor, each, this, { passive: true, signal });
     }
+
+    if (!this._showTriggers.has('click') && !this._hideTriggers.has('click')) {
+      addWeakEventListener(anchor, 'click', this, { passive: true, signal });
+    }
   }
 
   private _addTooltipListeners(): void {
@@ -161,6 +165,15 @@ class TooltipController implements ReactiveController {
   }
 
   private async _handleAnchorEvent(event: Event): Promise<void> {
+    if (
+      !this.open &&
+      !this._showTriggers.has(event.type) &&
+      event.type === 'click'
+    ) {
+      this._options.onClick.call(this._host);
+      return;
+    }
+
     if (!this._open && this._showTriggers.has(event.type)) {
       await this._options.onShow.call(this._host);
     }
@@ -283,4 +296,5 @@ type TooltipCallbacks = {
   onShow: (event?: Event) => unknown;
   onHide: (event?: Event) => unknown;
   onEscape: (event?: Event) => unknown;
+  onClick: (event?: Event) => unknown;
 };

src/components/tooltip/tooltip.spec.ts

@@ -534,7 +534,7 @@ describe('Tooltip', () => {
 
   describe('Behaviors', () => {
     beforeEach(async () => {
-      clock = useFakeTimers({ toFake: ['setTimeout'] });
+      clock = useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       const container = await fixture(createTooltipWithTarget());
       anchor = container.querySelector('button')!;
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
@@ -660,6 +660,40 @@ describe('Tooltip', () => {
       await hideComplete(tooltip);
       expect(tooltip.open).to.be.false;
     });
+
+    it('prevents tooltip from showing when clicking the target - #1828', async () => {
+      const eventSpy = spy(tooltip, 'emitEvent');
+
+      tooltip.showTriggers = 'pointerenter';
+      tooltip.hideTriggers = 'pointerleave';
+
+      simulatePointerEnter(anchor);
+      await clock.tickAsync(199);
+      expect(tooltip.open).to.be.false;
+
+      // Click on the target before the tooltip is shown
+      simulateClick(anchor);
+      await clock.tickAsync(1);
+      await showComplete(tooltip);
+      expect(tooltip.open).to.be.false;
+      expect(eventSpy.callCount).to.equal(1);
+
+      eventSpy.resetHistory();
+
+      // Does not prevent showing when showTriggers includes 'click'
+      tooltip.showTriggers = 'click';
+
+      simulateClick(anchor);
+      await clock.tickAsync(DEFAULT_SHOW_DELAY);
+      await showComplete(tooltip);
+      expect(tooltip.open).to.be.true;
+
+      simulatePointerLeave(anchor);
+      await clock.tickAsync(endTick(DEFAULT_HIDE_DELAY));
+      await hideComplete(tooltip);
+      expect(tooltip.open).to.be.false;
+      expect(eventSpy.callCount).to.equal(4);
+    });
   });
 
   describe('Events', () => {

src/components/tooltip/tooltip.ts

@@ -77,6 +77,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
     onShow: this._showOnInteraction,
     onHide: this._hideOnInteraction,
     onEscape: this._hideOnEscape,
+    onClick: this._stopTimeoutAndAnimation,
   });
 
   private readonly _containerRef = createRef<HTMLElement>();