From 599ae1a44a0266dfd8922b03a2b4d8df40c0fb56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A1=9F=E6=84=9B=E9=8E=B5=E9=95=9Ede=E6=A0=A4=E4=BB=AF?=
 <351711778@qq.com>
Date: Thu, 17 Jan 2019 10:49:38 +0800
Subject: [PATCH] fix(module:tree-select): fix tree-select overlay's index
 problem (#2764)

close #2730
---
 .../tree-select/nz-tree-select.component.ts   | 23 +++++++++++++------
 components/tree-select/nz-tree-select.spec.ts | 10 ++++++++
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
index a7f8267f090..5c47710c00a 100644
--- a/components/tree-select/nz-tree-select.component.ts
+++ b/components/tree-select/nz-tree-select.component.ts
@@ -238,6 +238,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
       this.updateCdkConnectedOverlayStatus();
       this.updatePosition();
       this.updateDropDownClassMap();
+      this.updateStackingOrder();
     }
   }
 
@@ -307,6 +308,14 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     });
   }
 
+  updateStackingOrder(): void {
+    if (this.renderer.nextSibling(this.overlayRef.hostElement)) {
+      const parentNode = this.renderer.parentNode(this.overlayRef.hostElement);
+      this.renderer.appendChild(parentNode, this.overlayRef.backdropElement);
+      this.renderer.appendChild(parentNode, this.overlayRef.hostElement);
+    }
+  }
+
   attachOverlay(): void {
     this.portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
     this.overlayRef = this.overlay.create(this.getOverlayConfig());
@@ -331,18 +340,18 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
       new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
     ];
     this.positionStrategy = this.overlay.position()
-    .flexibleConnectedTo(this.treeSelect)
-    .withPositions(positions)
-    .withFlexibleDimensions(false)
-    .withPush(false);
+      .flexibleConnectedTo(this.treeSelect)
+      .withPositions(positions)
+      .withFlexibleDimensions(false)
+      .withPush(false);
     return this.positionStrategy;
   }
 
   subscribeOverlayBackdropClick(): Subscription {
     return this.overlayRef.backdropClick()
-    .subscribe(() => {
-      this.closeDropDown();
-    });
+      .subscribe(() => {
+        this.closeDropDown();
+      });
   }
 
   subscribeSelectionChange(): Subscription {
diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
index afe8281a535..2a35d036204 100644
--- a/components/tree-select/nz-tree-select.spec.ts
+++ b/components/tree-select/nz-tree-select.spec.ts
@@ -130,6 +130,16 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       expect(testComponent.value).toBe(null);
     }));
+    it('should update index when overlay pane have sibling node', fakeAsync(() => {
+      const fixture_next = TestBed.createComponent(NzTestTreeSelectBasicComponent);
+      fixture_next.detectChanges();
+      const dropdownBeforePane = overlayContainerElement.querySelectorAll('.cdk-overlay-pane')[0];
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+      const dropdownAfterPane = overlayContainerElement.querySelectorAll('.cdk-overlay-pane')[1];
+      expect(dropdownAfterPane.getAttribute('id')).toBe(dropdownBeforePane.getAttribute('id'));
+    }));
     it('should set null value work', fakeAsync(() => {
       fixture.detectChanges();
       expect(testComponent.value).toBe('10001');