From f20e32e0765882284adfa63cce25a3a2ec6bf47c Mon Sep 17 00:00:00 2001 From: Julien Date: Fri, 22 Apr 2022 21:18:14 +0200 Subject: [PATCH 1/2] fix(module:tree): tree select search slow in virtual mode --- components/tree-select/demo/virtual-scroll.ts | 1 + components/tree/tree.component.ts | 2 +- components/tree/tree.spec.ts | 51 +++++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) diff --git a/components/tree-select/demo/virtual-scroll.ts b/components/tree-select/demo/virtual-scroll.ts index a2c570be4a..219e205fc1 100644 --- 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" > ` }) diff --git a/components/tree/tree.component.ts b/components/tree/tree.component.ts index 031c64c0f4..eaf74fb531 100644 --- 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 index ff47f8d651..c6950fd317 100644 --- 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[] = [ { From ffb94740eaf6cd6fb4b7922e7cd6e189b2ebcf12 Mon Sep 17 00:00:00 2001 From: Julien Poyard Date: Tue, 5 Jul 2022 07:45:24 +0200 Subject: [PATCH 2/2] fix(module:tree): tree select search slow in virtual mode --- components/tree/tree.component.ts | 5 +++- components/tree/tree.spec.ts | 45 ++++++++++++++++++++----------- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/components/tree/tree.component.ts b/components/tree/tree.component.ts index eaf74fb531..514484ed9f 100644 --- a/components/tree/tree.component.ts +++ b/components/tree/tree.component.ts @@ -485,7 +485,10 @@ export class NzTreeComponent ngOnInit(): void { this.nzTreeService.flattenNodes$.pipe(takeUntil(this.destroy$)).subscribe(data => { - this.nzFlattenNodes = !!this.nzVirtualHeight && this.nzHideUnMatched ? data.filter(d => !d.canHide) : data; + this.nzFlattenNodes = + !!this.nzVirtualHeight && this.nzHideUnMatched && this.nzSearchValue?.length > 0 + ? data.filter(d => !d.canHide) + : data; this.cdr.markForCheck(); }); diff --git a/components/tree/tree.spec.ts b/components/tree/tree.spec.ts index c6950fd317..52c88a0d7d 100644 --- a/components/tree/tree.spec.ts +++ b/components/tree/tree.spec.ts @@ -146,25 +146,40 @@ describe('tree', () => { [ { - 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 = undefined and nzSearchValue = '0-1'", + when: { hideUnMatched: false, searchValue: '0-1' }, + then: { matchedNodeList: 3, nzFlattenNodes: 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=false and virtualHeight = '300px' and nzSearchValue = '0-1'", + when: { hideUnMatched: false, virtualHeight: '300px', searchValue: '0-1' }, + then: { matchedNodeList: 3, nzFlattenNodes: 7 } }, { - title: 'should display 7 nodes when hideUnMatched=true and virtualHeight = undefined', - when: { hideUnMatched: true }, - then: 7 + title: + "'should display 7 nodes when hideUnMatched=true and virtualHeight = undefined and nzSearchValue = '0-1'", + when: { hideUnMatched: true, searchValue: '0-1' }, + then: { matchedNodeList: 3, nzFlattenNodes: 7 } }, { title: - "should display 4 matched nodes based on nzSearchValue when hideUnMatched=true and virtualHeight = '300px'", + "should display 4 matched nodes based on nzSearchValue when hideUnMatched=true and virtualHeight = '300px' and nzSearchValue = undefined", when: { hideUnMatched: true, virtualHeight: '300px' }, - then: 4 + then: { matchedNodeList: 0, nzFlattenNodes: 3 } + }, + { + title: + "should display 4 matched nodes based on nzSearchValue when hideUnMatched=true and virtualHeight = '300px' and nzSearchValue = ''", + when: { hideUnMatched: true, virtualHeight: '300px', searchValue: '' }, + then: { matchedNodeList: 0, nzFlattenNodes: 3 } + }, + { + title: + "should display 4 matched nodes based on nzSearchValue when hideUnMatched=true and virtualHeight = '300px' and nzSearchValue = '0-1'", + when: { hideUnMatched: true, virtualHeight: '300px', searchValue: '0-1' }, + then: { matchedNodeList: 3, nzFlattenNodes: 4 } } ].forEach(({ title, when, then }) => { it( @@ -172,7 +187,7 @@ describe('tree', () => { fakeAsync(() => { // Given const { component, fixture, nativeElement } = testBed; - component.searchValue = '0-1'; + component.searchValue = when.searchValue; component.virtualHeight = when.virtualHeight; component.hideUnMatched = when.hideUnMatched; // When @@ -182,13 +197,13 @@ describe('tree', () => { // Then expect(component.treeComponent.getMatchedNodeList().length) .withContext('treeComponent.getMatchedNodeList().length') - .toBe(3); + .toBe(then.matchedNodeList); expect(component.treeComponent.nzFlattenNodes.length) .withContext('treeComponent.nzFlattenNodes.length') - .toBe(then); + .toBe(then.nzFlattenNodes); expect(nativeElement.querySelectorAll('nz-tree-node').length) .withContext('number of displayed nz-tree-node elements') - .toBe(then); + .toBe(then.nzFlattenNodes); }) ); });