feat(module:tooltip): support changing trigger (#4397)

* feat(module:tooltip): support changing trigger * fix: remove listeners when directive destroys close #4365
NG-ZORRO · Nov 8, 2019 · 48d7122 · 48d7122
1 parent 6a2c132
commit 48d7122
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/components/tooltip/base/nz-tooltip-base.directive.ts b/components/tooltip/base/nz-tooltip-base.directive.ts
@@ -114,7 +114,7 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
    */
   protected isDynamicTooltip = false;
 
-  protected triggerUnlisteners: Array<() => void> = [];
+  protected readonly triggerUnlisteners: Array<() => void> = [];
 
   protected $destroy = new Subject<void>();
 
@@ -133,6 +133,13 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
+    const { nzTrigger, specificTrigger } = changes;
+    const trigger = specificTrigger || nzTrigger;
+
+    if (trigger && !trigger.isFirstChange()) {
+      this.registerTriggers();
+    }
+
     if (this.tooltip && this.isDynamicTooltip) {
       this.updateChangedProperties(changes);
     }
@@ -192,6 +199,8 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
   ngOnDestroy(): void {
     this.$destroy.next();
     this.$destroy.complete();
+    this.removeTriggerListeners();
+
     if (this.tooltipRef) {
       this.tooltipRef.destroy();
     }
@@ -241,6 +250,8 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
     const el = this.elementRef.nativeElement;
     const trigger = this.isDynamicTooltip ? this.trigger : this.tooltip.nzTrigger;
 
+    this.removeTriggerListeners();
+
     if (trigger === 'hover') {
       let overlayElement: HTMLElement;
       this.triggerUnlisteners.push(
@@ -341,4 +352,9 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
       isEnter && isOrigin ? this.show() : this.hide();
     }
   }
+
+  private removeTriggerListeners(): void {
+    this.triggerUnlisteners.forEach(cancel => cancel());
+    this.triggerUnlisteners.length = 0;
+  }
 }
diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts
@@ -24,7 +24,7 @@ import { NzToolTipModule } from './nz-tooltip.module';
     >
       Show
     </a>
-    <a #titleTemplate nz-tooltip [nzTitle]="template">Show</a>
+    <a #titleTemplate nz-tooltip [nzTitle]="template" [nzTrigger]="trigger">Show</a>
     <ng-template #template>
       title-template
     </ng-template>
@@ -36,7 +36,6 @@ import { NzToolTipModule } from './nz-tooltip.module';
   `
 })
 export class NzTooltipTestDirectiveComponent {
-
   @ViewChild('titleString', { static: false }) titleString: ElementRef;
 
   @ViewChild('titleString', { static: false, read: NzTooltipDirective })
@@ -50,6 +49,7 @@ export class NzTooltipTestDirectiveComponent {
   @ViewChild('inBtnGroup', { static: false }) inBtnGroup: ElementRef;
   title = 'title-string';
 
+  trigger: string | null = 'hover';
 }
 
 @Component({
@@ -282,6 +282,26 @@ describe('NzTooltip', () => {
       expect(tooltipComponent.nzTitle).toBe('changed!');
       expect(overlayContainerElement.textContent).toContain('changed!');
     }));
+
+    it('should support changing trigger', fakeAsync(() => {
+      const featureKey = 'title-template';
+      const triggerElement = component.titleTemplate.nativeElement;
+
+      dispatchMouseEvent(triggerElement, 'mouseenter');
+      waitingForTooltipToggling(fixture);
+      expect(overlayContainerElement.textContent).toContain(featureKey);
+
+      dispatchMouseEvent(triggerElement, 'mouseleave');
+      waitingForTooltipToggling(fixture);
+      expect(overlayContainerElement.textContent).not.toContain(featureKey);
+
+      component.trigger = null;
+      fixture.detectChanges();
+
+      dispatchMouseEvent(triggerElement, 'mouseenter');
+      waitingForTooltipToggling(fixture);
+      expect(overlayContainerElement.textContent).not.toContain(featureKey);
+    }));
   });
 });