Setting to allow only tree leafs to be selectable options

[johannesleander]

Is your feature request related to a problem? Please describe. My team and I are using react-dropdown-tree-select to achieve hierarchical grouping of selectable options in an administration GUI. Our use case relies on the first option of the tree to act as a parent which groups the tree leafs as options.

The react-dropdown-tree-select way seems to be that every node in rendered tree should be selectable, with the mode setting partially controlling how parents interact with its children. My instinct was to utilize the exposed settings showDropdown to manually control if the dropdown is showed or not.

• showDropdown has no effect on the modes hierarchical or multiSelect which makes it unreliable for our use case.
• showDropdown works with radioSelect, but poses another problem in that onChange isn't being called when selecting an already "checked" option. This has the unfortunate side effect of us not being able to collapse the parent nodes once they've been opened.

Describe the solution you'd like I'd a suggest an option to render only the leafs of the trees to be selectable as options via another option in prop mode called onlyLeafOptions or something similair.

Describe alternatives you've considered I've considered using one select element per "parent". This solution does work but isn't very clean and wastes a lot of vertical space in our GUI.

Additional context This is an example of how I'd like the dropdown to look.

[mrchief]

Thanks for the detailed issue!

showDropdown has no effect on the modes hierarchical or multiSelect which makes unreliable for our use case.

It should show the dropdown regardless of the mode. This could be a bug which should be fixed.

Looking at your screenshot and reading your use case, I think what might work for you is this:

• fix show dropdown bug
• mode=hierarchical
• set parent non selectable by setting disable=true on parent nodes
• css to hide checkboxes, show arrows (you can check bootstrap, material ui examples)

Whether you want radio or checkbox depends on whether you want single or multi select. Thoughts?

[johannesleander]

Thanks for the suggestion! I'll try this out as soon as possible and return with results.

[johannesleander]

I've now set aside some time to take a look at the suggestion from @mrchief.

It turns out I had misunderstood what the setting showDropdown does. It controls the behavior rather than the current state of the dropdown (i.e. "always"/"initial" instead of true/false). I gave it the value "always" or "initial" depending on the boolean value of an internal state when manually toggling in onChange, which had the unfortunate side effect of getting the state of the dropdown out-of-sync with my internal state. Relying on showDropdown=initial instead of trying to control the expansion state myself gave better results.

The suggestion of using disable=true for the root nodes and removing checkboxes using css achieves parts of the behavior I'm looking for. However, only the toggle button (i.e. the expand/collapse arrow) next to each root node can be clicked to expand the node. As the node is disabled, no click event is being sent and I can't control the expansion state manually. I'm sure this can be hacked together by sending a custom action for the parent nodes, creating a branching behavior in onNodeToggle or onChange.

Being able to click the node label to expand it is - for now - a nice to have for our use case. A consideration could be to add support for using nodes as "unselectable groups" where the node is effectively a dropdown within the dropdown. Any thoughts?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mrchief]

Merging discussions, head over to #369 for discussion/updates.