[tree view][RichTreeView] Checkbox parent child interactions don't work when checking and unchecking child nodes

[reese1515]

Steps to reproduce

Steps:

1. Open this link to live example: (require) https://stackblitz.com/run?file=Demo.tsx
2. Check the a parent entry.
3. Children correctly become checked.
4. Uncheck a child under the checked parent.
5. Parent remains checked. (Bug)
6. Uncheck all entries in the tree
7. Check all child nodes under a parent.
8. Parent does not check (Bug)

Current behavior

Checking and unchecking child nodes does not update the parents checked state

Expected behavior

The parent node does not reflect the checked state of its children.
If the parent is checked and a child becomes unchecked the parent should become unchecked
If you check all the children under a parent the parent should become checked

Even functionality like what's seen in https://www.npmjs.com/package/react-checkbox-tree with a grayed out checked parent would be nice. After unchecking children if you then collapse the tree, knowing which parents have all their children checked vs which only have some checked would be nice.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Rich Tree View

[michelengelen]

Expected behavior

The parent node does not reflect the checked state of its children. If the parent is checked and a child becomes unchecked the parent should become unchecked If you check all the children under a parent the parent should become checked

This is arguable. There are scenarios where you want that behavior. Think about you want to move the children out of the parent. If you always select the parent when selecting all children this is impossible.

I know that we recently added new parent-children selection behavior in the data grid and added a bit of customizability around it. I think we also planned to implement the same thing in the tree view component, but am not sure how far this is gone until now.

@noraleonte would you know more?

[noraleonte]

Hey there @reese1515 👋
For some reason I can't seem to open the demo, but I think I get the issue.
I think the described behavior is expected I think. The selectionPropagation is an object of type

type TreeViewSelectionPropagation = {
  descendants?: boolean; // default: false
  parents?: boolean; // default: false
};

If selectionPropagation.parents is false, the tree view behaves the way you described. If it's true, selecting children impacts the parent. There's a doc section about that here. Does that answer the question?

Oh, this is a feature released in v8 alpha

cc. @michelengelen

[reese1515]

@noraleonte Sorry about the link not working. If you go to https://mui.com/x/react-tree-view/rich-tree-view/selection/#parent-children-selection-relationship and open the example in Parent / children selection relationship you'll see what I mean.

@michelengelen The documentation on https://mui.com/x/react-tree-view/rich-tree-view/selection/#parent-children-selection-relationship under the header Parent / children selection relationship states what I'm describing to be the expected behavior. What you described as a counter example with moving children outside of the parent I would argue is a special case.

I also found it interesting that the documentation says "This feature isn't implemented yet. It's coming.

👍 Upvote issue #4821 if you want to see it land faster.

Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with your current solution."

However when you go to that issue its completely unrelated to the parent child relationship with respects to checking and unchecking and instead has to do with Drag and Drop.

[noraleonte]

@reese1515 You should be able to use the built-in selection propagation feature starting with v8 which is currently in alpha. You can find the documentation for that on https://next.mui.com/x/react-tree-view/rich-tree-view/selection/#automatic-parents-and-children-selection.
The documentation example you linked is a recipe that shows you how to implement a custom solution for this with some of the API that the Tree View provides. 👍

[reese1515]

@noraleonte Thank you this is exactly what I was looking for.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@reese1515 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[michelengelen]

Sry @reese1515 I forgot to mention before that this is not part of v7, but the current alpha for v8. 🙇🏼 That's where the confusion came from! My bad!