primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.42k stars 4.6k forks source link

TreeSelect: Programmatic selection does not propagate #12714

Open xanderflood opened 1 year ago

xanderflood commented 1 year ago

Describe the bug

When selecting nodes in a checkbox-based treselect using mouse clicks, the default behavior is to propagate selection up the tree so that ancestors will be either selected or partially selected, as required.

When setting the selection for a tree programmatically the expected behavior is that this propagation would also take place, but it currently does not.

This bug is pretty onerous to work around. Correctly propagating this state manually requires a considerable amount of code, especially if you want to handle all the possible cases, like choosing non-leaf nodes, propagating both up and down, and distinguishing partial- and full-selection (since one is managed by modifying the contents of the node tree itself, and the other is managed by manipulating the actual selection value). The existing implementation of propagation does not seem to be packaged in a way that allows users of the library to easily trigger the existing logic directly, so a manual workaround produces significant code duplication.

Environment

This stackblitz uses Angular v11 and primeng v13, but I experienced the issue originally using v14 of each, and later also using v15 of each. https://stackblitz.com/edit/primeng-treeselect-demo-rddvht?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,package.json

Reproducer

No response

Angular version

14

PrimeNG version

14

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

No response

Steps to reproduce the behavior

See here: https://stackblitz.com/edit/primeng-treeselect-demo-rddvht?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,package.json

Expected behavior

Whenver a tree, treeselect, or other related component has its selection modified, even it is being modified programmatically, the configured propagation behavior should be allowed to take place.

StephanBis commented 4 months ago

Is there any update on this? We have 4 levels in our tree and programmatic selection is not propagating.

StephanBis commented 4 months ago

Setting propogateSelectionUp property helped in my case

I don't see how this would fix the issue, the defaults for both propogateSelectionUp and propogateSelectionDown are true. When clicking manually, propagation works fine up and down, but not programmatically.

xanderflood commented 4 months ago

FWIW, my workaround was to disable propagation in both directions so that we could take control and implement the propagation logic ourselves.

In our specific use case, reimplementing the logic from scratch produced a much simpler implementation than the stock one provided by primeng. That one attempts to cope with dozens of configuration scenarios that weren't valuable for us, and as a result is obscenely complex. While it's frustrating to do, you might find that you are also able to produce something far simpler and more bug-free than PrimeNg's approach. I will note that the choice to have "selection" and "partialSelection" represented in fundamentally different ways (one via a separate selection array and the other via a piece of state recorded on individual nodes) is very strange and made it more frustrating to work with.

abelokon0711 commented 3 months ago

@xanderflood We are facing the same issue. Would you mind sharing your solution through a Gist or creating a PR to resolve this issue?

AbhishekKatariya9 commented 2 months ago

@xanderflood, it would be really helpful if you could share your custom code through a Gist. Thanks!

subrothosamantha commented 2 months ago

I faced the same issue, and here is my workaround code to make it work. Thanks. https://gist.github.com/subrothosamantha/6afd6e39de96c28ec1b016ff9e15af13