Material-ui: TreeView - Expand TreeItem manually

[pimeh]

I'm wondering if there is a way to open TreeItem manually? If I have a node "Add item" with a child node "Items", is there a way to expand "Items" once a new item is added?

What is the recommended way of achieving what I want?

Here is a Codesandbox that describe the functionality I'm looking for.

[oliviertassinari]

@pimeh @flurmbo What do you think of allowing the expanded state to be controlled?
Right now, we have a defaultExpanded prop that supports the uncontrollable approach but nothing for the controlled way. A new expanded, and onExpanded props could solve this problem.

[flurmbo]

@oliviertassinari I think that's much better. When I made my fix I wasn't sure how the API for manual control would look like for the TreeItem, but after looking at the Tooltip component I think it can be done analogously to that component's open, onOpen, onClose props

[oliviertassinari]

Cool, in our case, I hope that a two props are enough. I would imagine onExpand, but maybe we can find a better name

Callback function for when a tree item is expanded or collapsed

[flurmbo]

I think that would work if the callback is called with a boolean parameter indicating the collapsed/expanded state of the TreeItem. Wouldn't the parent component need that value to manually update the state of the expanded prop? But otherwise sounds good, you can call it onToggleExpand or something!

[oliviertassinari]

@flurmbo for the signature of the callback method, we can use the same as onChange in https://material-ui.com/api/expansion-panel/. The first argument would be the event, the second argument would be the whole expanded state. Maybe we can imagine a third argument to signal the node id that changed. My proposal is from a TreeView perspective.

We might need something close for the TreeItem.