TreeSelect: Too many items are expanded in a nested tree

[noxify]

Describe the bug

We're using the TreeSelect component and an user told us, that too many items are expanded in the nested tree when he opens the component with a pre-selected value.

Based on the code, it could be a "works as designed", because it fetches are nodes above + the parent node to mark them as "active". ( if I understood it correctly 🙈 )

https://github.com/primefaces/primereact/blob/master/components/lib/treeselect/TreeSelect.js#L232-L282

• Any thoughts how to solve it?
• Is it a bug or "works as designed"?

Thanks guys ✌️

Reproducer

https://codesandbox.io/s/friendly-water-7wzrh3

PrimeReact version

8.3.0

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Tested only on latest chrome ( WIN/OSX )

Steps to reproduce the behavior

1. Go to the codesandbox ( https://codesandbox.io/s/friendly-water-7wzrh3 )
2. Open the TreeSelect
3. You see that Child Element 1341 is selected
4. You see that all Sub Elements above ( inside the group ) are also expanded

Expected behavior

The Subs above aren't expanded 🤷🏿‍♂️

[melloware]

Thanks for the report. This does feel like an unintended bug to me.

[noxify]

Not sure if it helps, but the mentioned code part is based on this:

expandedKeys contains all ids which are above, so i just search for expandedKeys in the code :)

[melloware]

Yeah the bug is definitely in updateTreeBranchState i think.

[melloware]

@arkadiusztw do you want to look at this one too?

[arkadiusztw]

@noxify Can I ask you to upload the codesandbox again? It is not working at the moment

[noxify]

@arkadiusztw - thanks for the hint - i have restored the sandbox if you need additional information or something else, please let me know :)

[noxify]

Hey,

we found a workaround/solution to solve this issue.

With PrimeReact 9 it's now possible to control the expanded elements. ( https://primereact.org/treeselect/#controlled ) We have updated our logic to get the parents as array for the current selected element .

This value is used to define the expandedKeys property in the TreeSelect component. ( For everyone else: Don't forget to set the onToggle prop as shown in the docs, otherwise it will not work )

@mertsincan - not sure if this is an issue anymore, what do you think?

[melloware]

@noxify if you could create a new Code Sandbox showing your fix I can mark this as "Resolution: workaround" and others can see your fix!

[noxify]

@melloware Here the new sandbox: https://codesandbox.io/s/angry-minsky-6zjp8g

Updated also the initial post with the workaround :)

[melloware]

I actually think your workaround is the "correct" way to use this component!