Show bottom-level nodes in the pill list by traversing the tree on checkbox selection

[gandhis1]

A very desirable feature would be for the tags list to display bottom-level nodes - i.e. traverse the tree. Let's say I have a dropdown which consists of countries and states. For example:

• USA
  • NY
  • FL
  • CA
  • TX
  • ...
• Canada
  • Ottawa
  • Quebec
  • Ontario
  • Alberta
  • ....
• UK
  • ...
• Australia
  • ...

Currently, when I the select "USA" checkbox, the pill shows as "USA" and the selectedNodes[] shows me the "USA" node. However, rather than "US" showing up as a pill, I would prefer all 50 states to show up as separate pills, and for those to be the content of the selectedNodes[] array.

[mrchief]

Hey! That's one of the design decisions we debated over while building this component. It has been asked in the past and also the flip case where you want the parent to act as select/deselcet all for children. This can vary based on use case to use case so the component tries to be flexible and provides ways to accomplish all possible outcomes without making those decisions itself. Some of the older discussions can be seen here #481 (comment) and here #244

What you are looking for is to use mode=hierarchical. Now selecting 50 states individually may not be a good UX so what you'd need to do is wrap the component in an HoC that sets each children's selected=true|false when the parent is toggled.

[gandhis1]

Thanks, that definitely helps. I'll override onChange, traversing down each selected node until I get to all leaf nodes, and then I'll set the checked property of each leaf node to true, while setting the original selected nodes to checked: false if it is a non-leaf node.

The one thing I haven't figured out yet - and this may be an oversight on my part - is how to conveniently get the children on the original selected TreeNode from onChange - it seems _children are some codified identifiers and children is undefined. Do I need to go back to the original data object to do this? I've stored that object in the state of the HoC as that seemed to be the convention in the examples.

Edit: On second thought, I suppose it makes no sense to mutate the argument of onChange as that wouldn't generate a re-render, so changing the state is the only way that would work.

[mrchief]

Yeah true. The reason it doesn't expose children is to avoid confusion that you can modify them and expect the component to update. The _children is an internal property and while I could go to great lengths to hide it, I feel adding all that extra code is not worth it.