fix(module:tree-select): fix tree-select overlay's index problem (#2764)

close #2730
NG-ZORRO · Jan 17, 2019 · 599ae1a · 599ae1a
1 parent 9d63c57
commit 599ae1a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git 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
@@ -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');