fix(module:tree): tree select search slow in virtual mode

NG-ZORRO · Apr 25, 2022 · 9b47830 · 9b47830
1 parent 21ec517
commit 9b47830
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/components/tree-select/demo/virtual-scroll.ts b/components/tree-select/demo/virtual-scroll.ts
@@ -11,6 +11,7 @@ import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
       nzShowSearch
       nzPlaceHolder="Please select"
       nzVirtualHeight="300px"
+      nzHideUnMatched="true"
     ></nz-tree-select>
   `
 })

diff --git a/components/tree/tree.component.ts b/components/tree/tree.component.ts
@@ -485,7 +485,7 @@ export class NzTreeComponent
 
   ngOnInit(): void {
     this.nzTreeService.flattenNodes$.pipe(takeUntil(this.destroy$)).subscribe(data => {
-      this.nzFlattenNodes = data;
+      this.nzFlattenNodes = !!this.nzVirtualHeight && this.nzHideUnMatched ? data.filter(d => !d.canHide) : data;
       this.cdr.markForCheck();
     });
 

diff --git a/components/tree/tree.spec.ts b/components/tree/tree.spec.ts
@@ -144,6 +144,55 @@ describe('tree', () => {
         expect(component.treeComponent.getMatchedNodeList().length).toEqual(1);
       }));
 
+      [
+        {
+          title: 'should display 7 nodes when hideUnMatched=false and virtualHeight = undefined',
+          when: { hideUnMatched: false },
+          then: 7
+        },
+        {
+          title: "should display 7 nodes when hideUnMatched=false and virtualHeight = '300px'",
+          when: { hideUnMatched: false, virtualHeight: '300px' },
+          then: 7
+        },
+        {
+          title: 'should display 7 nodes when hideUnMatched=true and virtualHeight = undefined',
+          when: { hideUnMatched: true },
+          then: 7
+        },
+        {
+          title:
+            "should display 4 matched nodes based on nzSearchValue when hideUnMatched=true and virtualHeight = '300px'",
+          when: { hideUnMatched: true, virtualHeight: '300px' },
+          then: 4
+        }
+      ].forEach(({ title, when, then }) => {
+        it(
+          title,
+          fakeAsync(() => {
+            // Given
+            const { component, fixture, nativeElement } = testBed;
+            component.searchValue = '0-1';
+            component.virtualHeight = when.virtualHeight;
+            component.hideUnMatched = when.hideUnMatched;
+            // When
+            fixture.detectChanges();
+            tick(300);
+            fixture.detectChanges();
+            // Then
+            expect(component.treeComponent.getMatchedNodeList().length)
+              .withContext('treeComponent.getMatchedNodeList().length')
+              .toBe(3);
+            expect(component.treeComponent.nzFlattenNodes.length)
+              .withContext('treeComponent.nzFlattenNodes.length')
+              .toBe(then);
+            expect(nativeElement.querySelectorAll('nz-tree-node').length)
+              .withContext('number of displayed nz-tree-node elements')
+              .toBe(then);
+          })
+        );
+      });
+
       it('should match nodes based on nzSearchFunc', fakeAsync(() => {
         const { component, fixture, nativeElement } = testBed;
         component.searchFunc = (data: NzTreeNodeOptions): boolean => data.title === component.searchValue;
@@ -588,6 +637,7 @@ describe('tree', () => {
       [nzMultiple]="multiple"
       [nzSearchValue]="searchValue"
       [nzSearchFunc]="searchFunc"
+      [nzVirtualHeight]="virtualHeight"
       [nzHideUnMatched]="hideUnMatched"
       [nzExpandAll]="expandAll"
       [nzExpandedIcon]="expandedIcon"
@@ -619,6 +669,7 @@ export class NzTestTreeBasicControlledComponent {
   defaultExpandedKeys: string[] = [];
   expandedIcon?: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
   searchFunc?: (node: NzTreeNodeOptions) => boolean;
+  virtualHeight?: string | boolean = false;
   hideUnMatched = false;
   nodes: NzTreeNodeOptions[] | NzTreeNode[] = [
     {