fix(tooltip): handle document touch event in tooltipTarget

Author: RivaIvanova

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts

@@ -211,14 +211,14 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        this.target.tooltipTarget = this;
-
         this.checkOutletAndOutsideClick();
         const shouldReturn = this.preMouseEnterCheck();
         if (shouldReturn) {
             return;
         }
 
+        this.target.tooltipTarget = this;
+
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);
 
@@ -265,7 +265,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        this.target.tooltipTarget = this;
         this.showTooltip();
     }
 
@@ -304,10 +303,18 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
 
+        this.target.opening.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.target.tooltipTarget === this) {
+                document.addEventListener('touchstart', this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this), { passive: true });
+            }
+        });
+
         this.target.closing.pipe(takeUntil(this.destroy$)).subscribe((event) => {
             if (this.target.tooltipTarget !== this) {
                 return;
             }
+
+            document.removeEventListener('touchstart', this.onDocumentTouchStart);
             const hidingArgs = { target: this, tooltip: this.target, cancel: false };
             this.tooltipHide.emit(hidingArgs);
 
@@ -316,8 +323,11 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             }
         });
 
+        this.target.forceClosed.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        });
+
         this.nativeElement.addEventListener('touchstart', this.onTouchStart = this.onTouchStart.bind(this), { passive: true });
-        this.target.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
     }
 
     /**
@@ -326,6 +336,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     public ngOnDestroy() {
         this.hideTooltip();
         this.nativeElement.removeEventListener('touchstart', this.onTouchStart);
+        document.removeEventListener('touchstart', this.onDocumentTouchStart);
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -340,13 +351,12 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     public showTooltip() {
         clearTimeout(this.target.timeoutId);
 
-        this.target.tooltipTarget = this;
-
         if (!this.target.collapsed) {
             //  if close animation has started finish it, or close the tooltip with no animation
             this.target.forceClose(this.mergedOverlaySettings);
             this.target.toBeHidden = false;
         }
+        this.target.tooltipTarget = this;
 
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -572,8 +572,8 @@ describe('IgxTooltip', () => {
             touchElement(dummyDiv);
             flush();
 
-            expect(targetOne.hideTooltip).not.toHaveBeenCalled();
-            expect(targetTwo.hideTooltip).toHaveBeenCalledTimes(1);
+            expect(targetOne.hideTooltip).toHaveBeenCalledTimes(1);
+            expect(targetTwo.hideTooltip).not.toHaveBeenCalled();
         }));
 
         it('should not emit tooltipHide event multiple times', fakeAsync(() => {

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts

@@ -1,12 +1,11 @@
 import {
     Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject,
-    OnDestroy
+    Output, EventEmitter
 } from '@angular/core';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { OverlaySettings } from '../../services/public_api';
 import { IgxNavigationService } from '../../core/navigation';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
-import { first, Subject, takeUntil } from 'rxjs';
 
 let NEXT_ID = 0;
 /**
@@ -28,7 +27,7 @@ let NEXT_ID = 0;
     selector: '[igxTooltip]',
     standalone: true
 })
-export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy {
+export class IgxTooltipDirective extends IgxToggleDirective {
     /**
      * @hidden
      */
@@ -63,6 +62,11 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
     @Input()
     public context;
 
+    /**
+     * @hidden
+     */
+    @Output() public forceClosed = new EventEmitter<void>();
+
     /**
      * Identifier for the tooltip.
      * If this is property is not explicitly set, it will be automatically generated.
@@ -104,14 +108,11 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
      */
     public toBeShown = false;
 
-    /** @hidden */
+    /**
+     * @hidden
+     */
     public tooltipTarget;
 
-    /** @hidden */
-    public onDocumentTouchStart: (event?: Event) => void;
-
-    private _destroy$ = new Subject<boolean>();
-
     /** @hidden */
     constructor(
         elementRef: ElementRef,
@@ -120,19 +121,6 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
         @Optional() navigationService: IgxNavigationService) {
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(elementRef, cdr, overlayService, navigationService);
-
-        this.opening.pipe(first(), takeUntil(this._destroy$)).subscribe(() => {
-            document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
-        });
-    }
-
-    /** @hidden */
-    public override ngOnDestroy() {
-        super.ngOnDestroy();
-
-        document.removeEventListener('touchstart', this.onDocumentTouchStart);
-        this._destroy$.next(true);
-        this._destroy$.complete();
     }
 
     /**
@@ -176,5 +164,7 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
             this.close();
             overlaySettings.positionStrategy.settings.closeAnimation = animation;
         }
+
+        this.forceClosed.emit();
     }
 }