fix(module:tree): unexpected disappear of tree-node (#3748)

close #3739 * fix: unexpected disappear of tree-node * test(module:nz-tree): update case * perf: add prop shouldHide to nzTreeNode * chore: rename prop shouldHide to canHide * fix: check match status of upstream and downstream tree node * test(module:nz-tree): update fit to it * chore: remove useless access modifier * test: update cases * test: combine two cases
NG-ZORRO · Jul 19, 2019 · 1ff176e · 1ff176e
1 parent ab8a58c
commit 1ff176e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/components/core/tree/nz-tree-base-node.ts b/components/core/tree/nz-tree-base-node.ts
@@ -49,6 +49,7 @@ export class NzTreeNode {
   private _isHalfChecked: boolean;
   private _isSelected: boolean;
   private _isLoading: boolean;
+  canHide: boolean;
   isMatched: boolean;
 
   service: NzTreeBaseService | null;

diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -174,7 +174,11 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
 
   get displayStyle(): string {
     // to hide unmatched nodes
-    return this.nzSearchValue && this.nzHideUnMatched && !this.nzTreeNode.isMatched && !this.nzTreeNode.isExpanded
+    return this.nzSearchValue &&
+      this.nzHideUnMatched &&
+      !this.nzTreeNode.isMatched &&
+      !this.nzTreeNode.isExpanded &&
+      this.nzTreeNode.canHide
       ? 'none'
       : '';
   }
@@ -275,11 +279,34 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
         this.nzTreeNode.isLoading = true;
       }
       this.nzTreeNode.isExpanded = !this.nzTreeNode.isExpanded;
+      if (this.nzTreeNode.isMatched) {
+        this.setDisplayForParentNodes(this.nzTreeNode);
+      }
+      this.setDisplayForChildNodes(this.nzTreeNode);
       const eventNext = this.nzTreeService.formatEvent('expand', this.nzTreeNode, event);
       this.nzTreeService!.triggerEventChange$!.next(eventNext);
     }
   }
 
+  private setDisplayForChildNodes(parentNode: NzTreeNode): void {
+    const { children } = parentNode;
+    if (children.length > 0) {
+      children.map(node => {
+        const canHide = !node.isMatched;
+        node.canHide = canHide;
+        this.setDisplayForChildNodes(node);
+      });
+    }
+  }
+
+  private setDisplayForParentNodes(targetNode: NzTreeNode): void {
+    const parentNode = targetNode.getParentNode();
+    if (parentNode) {
+      parentNode.canHide = false;
+      this.setDisplayForParentNodes(parentNode);
+    }
+  }
+
   /**
    * check node
    * @param event

diff --git a/components/tree/nz-tree.spec.ts b/components/tree/nz-tree.spec.ts
@@ -576,6 +576,29 @@ describe('nz-tree', () => {
       expect(treeInstance).toBeTruthy();
     });
 
+    it('parent tree-node should not disappear when children contains searchValue', fakeAsync(() => {
+      fixture.detectChanges();
+      fixture.componentInstance.checkedKeys = [...fixture.componentInstance.checkedKeys];
+      fixture.componentInstance.expandKeys = [...fixture.componentInstance.expandKeys];
+      fixture.componentInstance.selectedKeys = [...fixture.componentInstance.selectedKeys];
+      fixture.componentInstance.searchValue = '100011';
+      fixture.detectChanges();
+      let targetNode = treeElement.querySelectorAll('.ant-tree-switcher_open')[0];
+      dispatchMouseEvent(targetNode, 'click');
+      fixture.detectChanges();
+      expect(treeElement.querySelectorAll('.ant-tree-icon-hide')[0].children.length).toBe(3);
+
+      fixture.componentInstance.checkedKeys = [...fixture.componentInstance.checkedKeys];
+      fixture.componentInstance.expandKeys = [...fixture.componentInstance.expandKeys];
+      fixture.componentInstance.selectedKeys = [...fixture.componentInstance.selectedKeys];
+      fixture.componentInstance.searchValue = '10001';
+      fixture.detectChanges();
+      targetNode = treeElement.querySelectorAll('.ant-tree-switcher_open')[1];
+      dispatchMouseEvent(targetNode, 'click');
+      fixture.detectChanges();
+      expect(treeElement.querySelectorAll('.ant-tree-switcher_close').length).toEqual(9);
+    }));
+
     it('should get correctly nodes', () => {
       fixture.detectChanges();
       fixture.componentInstance.checkedKeys = [...fixture.componentInstance.checkedKeys];
@@ -843,6 +866,7 @@ export class NzTestTreeDraggableComponent {
       [nzDefaultCheckedKeys]="checkedKeys"
       [nzDefaultSelectedKeys]="selectedKeys"
       [nzDefaultExpandAll]="expandDefault"
+      (nzExpandChange)="nzEvent()"
     >
     </nz-tree>
   `
@@ -857,6 +881,8 @@ export class NzTestTreeOlderComponent implements OnInit {
   searchValue = '';
   modelNodes: NzTreeNode[];
 
+  nzEvent(): void {}
+
   ngOnInit(): void {
     this.modelNodes = [
       {