Merge pull request #16103 from IgniteUI/rivanova/fix-16100-master

fix(tooltip): prevent adding multiple document touch event listeners - master

Author: kacheshmarova

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

@@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core';
 import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent } from '../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent } from '../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api';
 import { IgxTooltipDirective } from './tooltip.directive';
@@ -621,6 +621,36 @@ describe('IgxTooltip', () => {
         }));
     });
 
+    describe('Multiple tooltips', () => {
+        let targetOne: IgxTooltipTargetDirective;
+
+        let tooltipOne: IgxTooltipDirective;
+        let tooltipTwo: IgxTooltipDirective;
+
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTooltipMultipleTooltipsComponent);
+            fix.detectChanges();
+            targetOne = fix.componentInstance.targetOne;
+            tooltipOne = fix.componentInstance.tooltipOne;
+            tooltipTwo = fix.componentInstance.tooltipTwo;
+        }));
+
+        it('should not add multiple document:touchstart event listeners when having multiple igxTooltip instances - #16100', fakeAsync(() => {
+            spyOn<any>(tooltipOne, 'onDocumentTouchStart').and.callThrough();
+            spyOn<any>(tooltipTwo, 'onDocumentTouchStart').and.callThrough();
+
+            touchElement(targetOne);
+            tick(500);
+
+            const dummyDiv = fix.debugElement.query(By.css('.dummyDiv'));
+            touchElement(dummyDiv);
+            flush();
+
+            expect(tooltipOne['onDocumentTouchStart']).toHaveBeenCalledTimes(1);
+            expect(tooltipTwo['onDocumentTouchStart']).not.toHaveBeenCalled();
+        }));
+    });
+
     describe('Tooltip integration', () => {
         beforeEach(waitForAsync(() => {
             fix = TestBed.createComponent(IgxTooltipWithToggleActionComponent);

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

@@ -122,10 +122,10 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
         super(elementRef, cdr, overlayService, navigationService);
 
         this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
-        this.overlayService.opening.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this.opening.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this._document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
         });
-        this.overlayService.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
         });
     }

projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts

@@ -64,6 +64,34 @@ export class IgxTooltipMultipleTargetsComponent {
     @ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective;
 }
 
+@Component({
+    template: `
+    <div class="dummyDiv">dummy div for touch tests</div>
+
+    <button class="buttonOne" #targetOne="tooltipTarget" [igxTooltipTarget]="tooltipRef1" style="margin: 100px">
+        Target One
+    </button>
+
+    <button class="buttonTwo" #targetTwo="tooltipTarget" [igxTooltipTarget]="tooltipRef2" style="margin: 100px">
+        Target Two
+    </button>
+
+    <div igxTooltip #tooltipRef1="tooltip">
+        Hello, I am tooltip 1!
+    </div>
+    <div igxTooltip #tooltipRef2="tooltip">
+        Hello, I am tooltip 2!
+    </div>
+    `,
+    imports: [IgxTooltipDirective, IgxTooltipTargetDirective]
+})
+export class IgxTooltipMultipleTooltipsComponent {
+    @ViewChild('targetOne', { read: IgxTooltipTargetDirective, static: true }) public targetOne: IgxTooltipTargetDirective;
+    @ViewChild('targetTwo', { read: IgxTooltipTargetDirective, static: true }) public targetTwo: IgxTooltipTargetDirective;
+    @ViewChild('tooltipRef1', { read: IgxTooltipDirective, static: true }) public tooltipOne: IgxTooltipDirective;
+    @ViewChild('tooltipRef2', { read: IgxTooltipDirective, static: true }) public tooltipTwo: IgxTooltipDirective;
+}
+
 
 @Component({
     template: `