From fa4014563b423e39c8be2ab5dc45a9895b4097d2 Mon Sep 17 00:00:00 2001
From: Hsuan Lee <HsuanGM@gmail.com>
Date: Sun, 19 Aug 2018 20:51:32 +0800
Subject: [PATCH] fix(module:tooltip,popconfirm,popover): not create element
 when use directive (#1968)

close #1967
---
 components/popconfirm/nz-popconfirm.directive.ts |  5 ++++-
 components/popconfirm/nz-popconfirm.spec.ts      | 11 +++++++++++
 components/popover/nz-popover.spec.ts            | 12 ++++++++++++
 components/tooltip/nz-tooltip.directive.ts       |  5 ++++-
 components/tooltip/nz-tooltip.spec.ts            | 15 +++++++++++++++
 5 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
index 5d8918b74f5..af897f088d0 100644
--- a/components/popconfirm/nz-popconfirm.directive.ts
+++ b/components/popconfirm/nz-popconfirm.directive.ts
@@ -86,7 +86,10 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
 
   ngOnInit(): void {
     if (!this.tooltip) {
-      this.tooltip = this.hostView.createComponent(this.factory).instance;
+      const tooltipComponent = this.hostView.createComponent(this.factory);
+      this.tooltip = tooltipComponent.instance;
+      // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967
+      this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement);
       this.isDynamicTooltip = true;
       const properties = [
         'nzTitle',
diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts
index 3a7de1a86f9..fc0c0d82b9c 100644
--- a/components/popconfirm/nz-popconfirm.spec.ts
+++ b/components/popconfirm/nz-popconfirm.spec.ts
@@ -239,6 +239,11 @@ describe('NzPopconfirm', () => {
       tick();
       expect(overlayContainerElement.querySelector('.ant-popover-message-title')).toBeNull();
     }));
+    it('should not create element', fakeAsync(() => {
+      fixture.detectChanges();
+      const triggerElement = component.inBtnGroup.nativeElement;
+      expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
+    }));
   });
 });
 
@@ -248,6 +253,11 @@ describe('NzPopconfirm', () => {
     <a nz-popconfirm #stringTemplate nzTitle="title-string" nzOkText="ok-text" nzCancelText="cancel-text" nzOkType="default" [nzCondition]="condition" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">Delete</a>
     <a nz-popconfirm #templateTemplate [nzTitle]="titleTemplate" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">Delete</a>
     <ng-template #titleTemplate>title-template</ng-template>
+    <div>
+      <button>A</button>
+      <button #inBtnGroup nz-popconfirm nzTitle="title-string" >B</button>
+      <button>C</button>
+    </div>
   `
 })
 export class NzpopconfirmTestNewComponent {
@@ -256,6 +266,7 @@ export class NzpopconfirmTestNewComponent {
   condition = false;
   @ViewChild('stringTemplate') stringTemplate: ElementRef;
   @ViewChild('templateTemplate') templateTemplate: ElementRef;
+  @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
 
 }
 
diff --git a/components/popover/nz-popover.spec.ts b/components/popover/nz-popover.spec.ts
index 0a2134cc63c..1f49e1e8ec4 100644
--- a/components/popover/nz-popover.spec.ts
+++ b/components/popover/nz-popover.spec.ts
@@ -171,6 +171,12 @@ describe('NzPopover', () => {
       expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull();
       expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull();
     }));
+
+    it('should not create element', fakeAsync(() => {
+      fixture.detectChanges();
+      const triggerElement = component.inBtnGroup.nativeElement;
+      expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
+    }));
   });
 });
 
@@ -185,6 +191,11 @@ describe('NzPopover', () => {
     <ng-template #templateContent>
       content-template
     </ng-template>
+    <div>
+      <button>A</button>
+      <button #inBtnGroup nz-popover nzTitle="title-string" >B</button>
+      <button>C</button>
+    </div>
   `
 })
 export class NzPopoverTestNewComponent {
@@ -192,6 +203,7 @@ export class NzPopoverTestNewComponent {
   @ViewChild('stringPopover', { read: NzPopoverDirective }) stringPopoverNzPopoverDirective: NzPopoverDirective;
   @ViewChild('templatePopover') templatePopover: ElementRef;
   @ViewChild('templatePopover', { read: NzPopoverDirective }) templatePopoverNzPopoverDirective: NzPopoverDirective;
+  @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
 }
 
 @Component({
diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts
index 63220cfe506..31110ade915 100644
--- a/components/tooltip/nz-tooltip.directive.ts
+++ b/components/tooltip/nz-tooltip.directive.ts
@@ -186,7 +186,10 @@ export class NzTooltipDirective implements AfterViewInit, OnInit, OnDestroy {
   ngOnInit(): void {
     // Support faster tooltip mode: <a nz-tooltip="xxx"></a>. [NOTE] Used only under NzTooltipDirective currently.
     if (!this.tooltip) {
-      this.tooltip = this.hostView.createComponent(this.factory).instance;
+      const tooltipComponent = this.hostView.createComponent(this.factory);
+      this.tooltip = tooltipComponent.instance;
+      // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967
+      this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement);
       this.isDynamicTooltip = true;
       const properties = [ 'nzTitle', 'nzContent', 'nzOverlayClassName', 'nzOverlayStyle', 'nzMouseEnterDelay', 'nzMouseLeaveDelay', 'nzVisible', 'nzTrigger', 'nzPlacement' ];
       properties.forEach(property => this.updateCompValue(property, this[ property ]));
diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts
index 49d1c836705..a7dfe977226 100644
--- a/components/tooltip/nz-tooltip.spec.ts
+++ b/components/tooltip/nz-tooltip.spec.ts
@@ -193,6 +193,7 @@ describe('NzTooltip', () => {
       tick(); // wait for next tick to hide
       expect(overlayContainerElement.textContent).not.toContain(featureKey);
     }));
+
     it('should nzTitle support template', fakeAsync(() => {
       const featureKey = 'title-template';
       const triggerElement = component.titleTemplate.nativeElement;
@@ -227,6 +228,13 @@ describe('NzTooltip', () => {
       tick(); // wait for next tick to hide
       expect(overlayContainerElement.textContent).not.toContain(featureKey);
     }));
+
+    it('should not create element', fakeAsync(() => {
+      fixture.detectChanges();
+      const triggerElement = component.inBtnGroup.nativeElement;
+      expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
+    }));
+
   });
 
 });
@@ -239,6 +247,11 @@ describe('NzTooltip', () => {
     <ng-template #template>
       title-template
     </ng-template>
+    <div>
+      <button>A</button>
+      <button #inBtnGroup nz-tooltip nzTitle="title-string" >B</button>
+      <button>C</button>
+    </div>
   `
 })
 export class NzTooltipTestNewComponent {
@@ -246,6 +259,8 @@ export class NzTooltipTestNewComponent {
   @ViewChild('titleString', { read: NzTooltipDirective }) titleStringNzTooltipDirective: NzTooltipDirective;
   @ViewChild('titleTemplate') titleTemplate: ElementRef;
   @ViewChild('titleTemplate', { read: NzTooltipDirective }) titleTemplateNzTooltipDirective: NzTooltipDirective;
+  @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
+
 }
 
 @Component({