Feature request: Parent select shouldn't select all children

[will-izard]

Hi. I'm looking for a widget where a branch or leaf in the tree can be selected. Selecting a branch/parent does not mean the children are selected. Otherwise, this widget looks great! Is there any way you could add that as a configuration option? Or maybe I overlooked a way to do this already? The use case is that you're selecting a category in a tree. You can select 1 or more categories, but the categories can be parent or child (ie branch or leaf) categories. Thanks!

[mrchief]

If I'm understanding you correctly, I think this component already does what you're looking for in its simplest form.

If you don't set showPartiallySelected to true (it's false by default) then selecting a parent will give you only the parent node in selectedNodes param (visually it'll check all children to indicate the parent has been checked). If you select all children manually, then you get all children nodes in selectedNodes and not the parent.

Is this what you're looking for?

[will-izard]

Hi, thanks. It's this bit that I'm not keen on "visually it'll check all children to indicate the parent has been checked". That indicates that all the children will be stored as selected as well, which they are not.

[mrchief]

I understand, but how else do you propose we show the state?

[will-izard]

Suggest simply show the parent as selected, not the children. So, only the explicitly selected checkbox is shown selected.

[mrchief]

I think that'd be weird UX wise, at least with checkboxes still visible. Maybe if we didn't have checkboxes, it'd look OK...

@toofff @Gregcop1 Thoughts?

[will-izard]

I think you have a different use case in mind to me. Both behaviours are valid. My use case is that user wants to select a page on a website on which to show a given item/advert etc. The pages are the items in the tree. They can select a parent page - that doesn't mean that the item/advert will be show on the child pages - just on the parent page. Hence, suggest this as a config option please.

[mrchief]

I get the config part, and I agree with you that it should be configurable. What I'm asking is , do you still want to see checkboxes in that case?

I'm thinking, in addition to your ask, whether having an option to show checkboxes will be a good idea.

[will-izard]

Yes, for sure, I still need checkboxes. Why would I not? Are you refering to the single select case? That could be useful - if i check on checkbox, it unchecks any other selected checkbox. Is that what you mean?

[mrchief]

Yeah, I mean the select would work the same way - you click on the node label and it'll select it (can show a different highlight state as well via CSS). Just imagine it without checkboxes.

[r20]

I'm also interested in being able to select a parent without the "visual" selection of children. I'd also like to be able to select both a parent and one or more of its children. Not just visual selection, but actual selection. This doesn't seem possible right now.

Here are example use cases (which are easier to explain than my use case): Ex 1: Administrators are presented with a tree view of hypervisors with children nodes that are virtual machines. The administrator needs to select hypervisors and/or virtual machines to perform an operation on. Ex 2: Users are asked to select government flags from a tree view. Countries have states/provinces as children which in turn have cities as children. Users should be able to select flags for parents and children independently of each other.

[will-izard]

I want the checkboxes still, as it can still be multi select. Would be good if the widget worked with a config flag to be single select and multiselect. So... I was hoping this was a small change. Just a config flag to turn on the behaviour to not check the child checkboxes when parent is checked. That's it. I need to use this soon (next week or 2) or not at all. If the use case is understood, are you able to make the enhancement? Support for a flag to support multi or single select (ie, show checkboxes or not) would be nice to, as an additional enhancement that would be useful.

[mrchief]

@r20 Your use-cases are related but different. You want hierarchical display but the ability to select both parent and children separately. This is fundamentally different from what this component was meant to do. I'm not opposed to the idea but I think it deserves it's own issue thread.

@will-izard So far I was under the impression that you just don't want children to be auto selected when parent is selected. Is that still the case? Or is your use-case more in line with what @r20 is suggesting?

In either case, it is not a small change by any means. The visual aspect aside, there is a whole bunch of logic (selecting/deselecting/partial selecting, node traversal as well as rendering/search optimizations) that relies on the fundamental truth that parent selection means children are selected. If that truth doesn't hold, then it means the tree and branches need to traversed every time to determine the correct tree state. And that makes it a non-trivial change.

I'm planning on altering the tree traversal logic in near future, one that allows for feature requests like these to be supported without requiring significant logic change (for every such request). But I cannot guarantee any timelines. I do this on my off time. As always, PRs and collective efforts are welcome.

[will-izard]

I think my requirement and @r20 are 2 parts of the same requirement. If the children are not auto-selected when parent is selected, I would then expect to be able to separately select the children. If I choose a parent and 2 children of the parent, only those 3 checkboxed are selected, and that counts as 3 selections.

[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.

[ayhid]

any news about this enhancement ?

[kivancic-ut]

Also curious about this feature. 🙂

[ytkopobot]

Want to use this component, but my use-case needs exactly this feature :( (Organizations hierarchy - selecting parent doesn't mean that all children are selected too...)

[mrchief]

Considering the amount of interest in this feature, I'm reopening this issue. This is up for grabs as of now, so any contributions are welcome!

[mrchief]

I published react-dropdown-tree-select@1.16.0-beta.1 which adds support for this. To opt-in to this behavior, pass hierarchial=true prop. The code can be found in this branch: feat/hierarchical.

Caveats:

• Opting into hierarchial=true negates/overrides showPartiallySelected; simply because in this mode, there is no parent-child relationship, so partial selection becomes a moot point.
• Without hierarchial=true, pre-selecting parent checked all children. In hierarchical mode, there is no such relation, so pre-selecting a node has no effect on its descendants or ancestors.

It's a beta release to get the community feedback, so please let me know if there are any issues or if there are any changes that you'd like to see.

[yash-thakur]

@mrchief Can you merge the pull request as even I need this feature and want to integrate it and test it out.

[mrchief]

@yash-thakur you can test it out currently by pointing to "react-dropdown-tree-select" : "1.16.0-beta.1" in your package.json.

[yash-thakur]

@mrchief Also curious how to prevent a user to only select atmost 1 item in the tree (not simpleSelect) and pre-select items from tree based on value.

[mrchief]

@yash-thakur To preselect values, pass checked: true in your initial data.

Restricting user to only 1 selected item in a tree view is not supported currently.

[mrchief]

:tada: This issue has been resolved in version 1.17.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[brandonsean08]

Hi @mrchief , I'm trying to implement this feature but it doesn't seem to be working for me. Am I correct in saying the only change that I need to make is adding a prop heirarchical={true} to the component?

I am using "react-dropdown-tree-select": "^2.3.1"

[mrchief]

With v2, things have changed a little - you now need to set mode=hierarchical https://github.com/dowjones/react-dropdown-tree-select#mode.

If you're migrating to v2, check all the breaking changes in the release notes: https://github.com/dowjones/react-dropdown-tree-select/releases/tag/v2.0.0

[brandonsean08]

@mrchief Thanks so much, I was using mode={heirarchical} instead of mode="heirarchical", working great now :)