fix(tooltip): handle documentTouch in tooltip

Author: RivaIvanova

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

@@ -276,11 +276,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        const tooltipTarget = this.target.tooltipTarget?.nativeElement;
-
-        if (tooltipTarget &&
-            tooltipTarget !== event.target &&
-            !tooltipTarget.contains(event.target)
+        if (this.nativeElement !== event.target &&
+            !this.nativeElement.contains(event.target)
         ) {
             this.hideTooltip();
         }
@@ -303,18 +300,11 @@ 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);
 
@@ -323,10 +313,6 @@ 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 });
     }
 
@@ -336,7 +322,6 @@ 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();
     }

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

@@ -1,11 +1,12 @@
 import {
-    Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject,
-    Output, EventEmitter
+    Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject, OnDestroy
 } 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 { IgxTooltipTargetDirective } from './tooltip-target.directive';
+import { Subject, takeUntil } from 'rxjs';
 
 let NEXT_ID = 0;
 /**
@@ -27,7 +28,7 @@ let NEXT_ID = 0;
     selector: '[igxTooltip]',
     standalone: true
 })
-export class IgxTooltipDirective extends IgxToggleDirective {
+export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy {
     /**
      * @hidden
      */
@@ -62,11 +63,6 @@ export class IgxTooltipDirective extends IgxToggleDirective {
     @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.
@@ -111,7 +107,9 @@ export class IgxTooltipDirective extends IgxToggleDirective {
     /**
      * @hidden
      */
-    public tooltipTarget;
+    public tooltipTarget: IgxTooltipTargetDirective;
+
+    private _destroy$ = new Subject<boolean>();
 
     /** @hidden */
     constructor(
@@ -121,6 +119,20 @@ export class IgxTooltipDirective extends IgxToggleDirective {
         @Optional() navigationService: IgxNavigationService) {
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(elementRef, cdr, overlayService, navigationService);
+
+        this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
+        this.overlayService.opening.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
+        });
+        this.overlayService.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        });
+    }
+
+    /** @hidden */
+    public override ngOnDestroy() {
+        super.ngOnDestroy();
+        document.removeEventListener('touchstart', this.onDocumentTouchStart);
     }
 
     /**
@@ -165,6 +177,10 @@ export class IgxTooltipDirective extends IgxToggleDirective {
             overlaySettings.positionStrategy.settings.closeAnimation = animation;
         }
 
-        this.forceClosed.emit();
+        document.removeEventListener('touchstart', this.onDocumentTouchStart);
+    }
+
+    private onDocumentTouchStart(event) {
+        this.tooltipTarget?.onDocumentTouchStart(event);
     }
 }