[TreeView] Scroll to programmatically selected tree item

[bharatkashyap]

Summary 💡

When selection is brought to a tree item programmatically, that page should scroll to that item in the tree view component.

Examples 🌈

Screen.Recording.2023-09-16.at.16.53.32.mov

Motivation 🔦

The TreeView component acts as a page hierarchy explorer for Toolpad with content often overflowing beyond its container. With this feature, the tree view component would scroll to the item currently selected in the page (and the tree itself as well)

Order ID 💳 (optional)

No response

[oliviertassinari]

I have added an illustration.

[flaviendelangle]

@bharatkashyap we discussed this issue this morning

Right now, I guess that you are controlling the selected items using the defaultSelected prop (renamed defaultSelectedItems in v7 btw).
If we added two imperative methods apiRef.current.selectItem and apiRef.current.scrollToItem (exact DX may vary), would it allow you to stop controlling the item and to fix the scroll problem you have?

[bharatkashyap]

@bharatkashyap we discussed this issue this morning

Right now, I guess that you are controlling the selected items using the defaultSelected prop (renamed defaultSelectedItems in v7 btw). If we added two imperative methods apiRef.current.selectItem and apiRef.current.scrollToItem (exact DX may vary), would it allow you to stop controlling the item and to fix the scroll problem you have?

Yes, this would serve the purpose

[matteotrapani]

Hey!
I have the same exact issue. I have a tree view that the user can navigate programmatically (by clicking on a button "go to details" of a different page), but I can't find a simple way to allow the autofocus on the tree view.

Is the solution proposed by @flaviendelangle going to fix it?

Thanks

[flaviendelangle]

It should yes
We should implement this feature in the coming weeks since we have several users asking for it 👍

[tamnguyenvt]

You can set and use document.getElementById(yourIdHere).scrollIntoView()

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

@bharatkashyap: 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.