ERROR RangeError: Maximum call stack size exceeded ( clr-tree)

[jwangyangls]

When the amount of data reaches about 100, the component clr-tree will report such an error at this time（clairty V2, clairty v4);

(clairty V1 doesn't have such a problem).

You can directly use this code for testing.

(I has hree groups of < clr-tree>< /clr-tree> on the UI at the same time);

< clr-tree ngIf="rootNodeFixed"> < clr-tree-node [clrExpanded]="true" clrRecursiveFor="let node of rootNodeFixed; getChildren: getChildren"> < clr-checkbox-container ngIf="isCheckable(node)"> < clr-checkbox-wrapper [attr.pks-ui-automation]="'computeResource' + idx"> < input type="checkbox" clrCheckbox [formControlName]="node.moid" [name]="node.moid" /> < label>{{node.name}}< /label> < /clr-checkbox-wrapper> < /clr-checkbox-container> < div ngIf="!isCheckable(node)"> {{node.name}} < /div> < /clr-tree-node> < /clr-tree>

< clr-tree ngIf="rootNodeFixed"> ......(Same content as the first) < /clr-tree> < clr-tree ngIf="rootNodeFixed"> ......(Same content as the first) < /clr-tree>

getChildren(node: ComputeResource): Array { return node.children; }

isCheckable(item: ComputeResource): boolean {
    return item.type === 'cluster' ||
        item.type === 'hostgroup' ||
        item.type === 'respool';

}

rootNodeFixed: [{ '0': { name: 'kubo-dc', moid: 'datacenter-3', children: [ { name: 'cluster-0', moid: 'domain-c8', children: [ { name: 'cluster-0-hg', moid: 'HostGroup:cluster-0-hg:domain-c8', children: [], type: 'hostgroup', selected: false, azParentId: null }, { name: 'Aaa3', moid: 'resgroup-308', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool1', moid: 'resgroup-280', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool10', moid: 'resgroup-289', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool11', moid: 'resgroup-290', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool12', moid: 'resgroup-291', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool2', moid: 'resgroup-281', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool3', moid: 'resgroup-282', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool4', moid: 'resgroup-283', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool5', moid: 'resgroup-284', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool6', moid: 'resgroup-285', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool7', moid: 'resgroup-286', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool8', moid: 'resgroup-287', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool9', moid: 'resgroup-288', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poole', moid: 'resgroup-314', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooleee', moid: 'resgroup-316', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolewd', moid: 'resgroup-321', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooleww', moid: 'resgroup-317', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolggg', moid: 'resgroup-319', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolhgf', moid: 'resgroup-323', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolhhh', moid: 'resgroup-318', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolkkk', moid: 'resgroup-320', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolkkkg', moid: 'resgroup-322', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolrew', moid: 'resgroup-325', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolrrr', moid: 'resgroup-315', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooltre', moid: 'resgroup-324', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolwsdc', moid: 'resgroup-326', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'aa4', moid: 'resgroup-309', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'aaa', moid: 'resgroup-306', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'aaa1', moid: 'resgroup-307', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'aaa5', moid: 'resgroup-310', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'az-0', moid: 'resgroup-46', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'ddd', moid: 'resgroup-312', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'fff', moid: 'resgroup-313', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'sss', moid: 'resgroup-311', children: [], type: 'respool', selected: false, azParentId: null } ], type: 'cluster', selected: false, azParentId: 0 }, { name: 'cluster-1', moid: 'domain-c10', children: [ { name: 'cluster-1-hg', moid: 'HostGroup:cluster-1-hg:domain-c10', children: [], type: 'hostgroup', selected: false, azParentId: null }, { name: '12', moid: 'resgroup-330', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New', moid: 'resgroup-327', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool13', moid: 'resgroup-292', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool14', moid: 'resgroup-293', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool15', moid: 'resgroup-294', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool16', moid: 'resgroup-295', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool17', moid: 'resgroup-296', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool18', moid: 'resgroup-297', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool19', moid: 'resgroup-298', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool20', moid: 'resgroup-299', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool21', moid: 'resgroup-300', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pool22', moid: 'resgroup-301', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poola', moid: 'resgroup-331', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolb', moid: 'resgroup-332', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolc', moid: 'resgroup-333', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poold', moid: 'resgroup-334', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolee', moid: 'resgroup-335', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolf', moid: 'resgroup-336', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolg', moid: 'resgroup-337', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolh', moid: 'resgroup-338', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooli', moid: 'resgroup-339', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolj', moid: 'resgroup-340', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolk', moid: 'resgroup-341', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooll', moid: 'resgroup-342', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolm', moid: 'resgroup-343', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooln', moid: 'resgroup-344', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolo', moid: 'resgroup-345', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolp', moid: 'resgroup-346', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolq', moid: 'resgroup-347', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolr', moid: 'resgroup-348', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pools', moid: 'resgroup-349', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolt', moid: 'resgroup-350', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolu', moid: 'resgroup-351', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolv', moid: 'resgroup-352', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolw', moid: 'resgroup-353', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolx', moid: 'resgroup-354', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Pooly', moid: 'resgroup-355', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'New Resource Poolz', moid: 'resgroup-356', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'az-1', moid: 'resgroup-47', children: [], type: 'respool', selected: false, azParentId: null }, { name: 'tgb', moid: 'resgroup-329', children: [], type: 'respool', selected: false, azParentId: null } ], type: 'cluster', selected: false, azParentId: null }, { name: 'cluster-2', moid: 'domain-c12', children: [ { name: 'cluster-2-hg', moid: 'HostGroup:cluster-2-hg:domain-c12', children: [], type: 'hostgroup', selected: false, azParentId: null }, { name: 'az-2', moid: 'resgroup-48', children: [], type: 'respool', selected: false, azParentId: 2 } ], type: 'cluster', selected: false, azParentId: 1 } ], type: 'datacenter', selected: false, azParentId: null } }]

[jwangyangls]

If you cannot reproduce this problem, use three groups of < clr-tree>< /clr-tree> on the UI at the same time < clr-tree>< /clr-tree> < clr-tree>< /clr-tree> < clr-tree>< /clr-tree>

[bdryanovski]

Hey @jwangyangls thanks for reporting this but could you create a StackBlitz reproducible demo. So we could be sure that we are looking at the same thing as you.

I manage to make one here - and it seems that on v4.0.8 the issue is not reproducible - but maybe I'm missing something?

Having huge trees is not good practice - cause it's creating some accessibility issues (Announcing branches, navigation, and so on...) - at the same time, they are creating a lot of DOM elements that could have a significant drop in the performance.

[jwangyangls]

@bdryanovski
I created a demo, and the link is below. The problem can be clearly re-displayed inside (v4.0.5); https://stackblitz.com/edit/angular-ivy-moqlqc?file=src/app/app.component.html

I found that this problem has really been fixed in version 4.0.8.

Thank you very much for your reply and the emphasis on version 4.0.8, which is very useful to me, but this problem may still exist in the current version of v2.

[Jinnie]

Yes, the problem has already been fixed in 4.0.8. https://clarity.design/news/4.0.8 A backport of https://github.com/vmware/clarity/pull/5363 to v2 could fix it in v2

[Jinnie]

Backported with https://github.com/vmware/clarity/pull/5426 Expect it on next v2 release.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.