TreeSelect: slow with large datasets

[DBolderman]

Describe the bug

When using the TreeSelect component with some very large datasets (1000+ items) the performance gets very slow. With the selectionMode set to ‘checkbox’ it renders even slower.

The part which causes the most delay is in the TreeNode component, where in the mounted hook the method setAllNodesTabIndexes() is called. This will fetch all available nodes and loops through all the nodes, and does that for every single node. E.g. when you have 1000 nodes, it will loop 1000 times through every node, doing 1000 times the exact same thing. Since only the root nodes are processed in the mounted hook this should be executed only once.

Also, I wonder if the lines 278-280 and 290 are really necessary, because the tabIndex is already set in the template code? It looks like the end result is the same?

If this could be fixed it would really help the user experience.

Reproducer

https://stackblitz.com/edit/primevue-treeselect-slow-performance?file=src%2FApp.vue

PrimeVue version

3.49.1

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[DBolderman]

Today I noticed the following Verbose Message in Chrome DevTools when toggling a node with 1000 children (TreeSelect component with checkbox mode):

[Violation] Forced reflow while executing JavaScript took 61ms

Seems like some suboptimal DOM mutation vs. reading problem, which might be the cause of the slowness when rendering a very large dataset.

More info about forced reflow: https://yonatankra.com/layout-reflow/

[danieldavies99]

+1 for this I have encountered this issue in production and I would be really appreciative of this addition!

I think that implementing virtual scroll in the tree select component would be a good solution, this has already been done for PrimeNG https://github.com/primefaces/primeng/issues/13772