[TreeView] Visually select the ancestors of a selected item

[amit-8]

The problem in depth

i am using treeview component and trying a feature where when we hover over the child the parent should also have same effect and when we click the child parent should also be selected

Your environment

`npx @mui/envinfo`

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

Search keywords: treeview

[github-actions]

You have created a support request under the "Priority Support" terms, which is a paid add-on to MUI X Premium ⏰. Please validate your support key using the link below:

https://tools-public.mui.com/prod/pages/jyhs86t?repo=mui-x&issueId=13215

Do not share your support key in this issue!

Priority Support is only provided to verified customers. Once you have verified your support key, we will remove the support: unknown label and add the support: priority label to this issue. Only then the time for the SLA will start counting.

[michelengelen]

Hey @amit-8
You can use the treeview public api for this. There is the getItem method with which you can get the parent item by its id. With this item you can do your modifications as needed.

@flaviendelangle should we document cases like this with a recipe as well?

[flaviendelangle]

It's an interesting use-case
For me it can be done in user-land as you said, but maybe not in an optimal way.
To do it, you one way is to use multiSelect and control the selection using selectedItems and onSelectedItemsChange to select all the ancestors when selecting an item.
But since you are using multiSelect, the Tree View will allow stuff like range selection using Shift which may not be what the user want here. You may be able to opt-out of those behaviors using event.defaultMuiPrevented on the relevant event handlers, but this could be quite fragile.

The clean implementation would be to only display the ancestors as selected but not have it in the model, that way people can use multiSelect if they want or stay with single selection.
To do that in user land would require creating a custom TreeItem, control the selection and pass a prop on the item slot of the RichTreeView component (for SimpleTreeView the implementation would differ here) saying if the item is visually selected or not and re-apply manually the style if needed.

We should definitely do a recipe a see how viable each approach is and pick the best one.

[igortas]

@flaviendelangle
I have similar case, where I need to have controlled selection, and myself provide which items I like to be selected, in my scenario, I like to make selected, all different items that exists in different parents that are expanded...

--- A expanded
------- D this should be selected
--- B expanded
--------D also this
--- C

What I've tried is:

selectedItems={
   selectedItems
   .filter(item => item.internalId === selectedInternalId)
   .map(item => item.treeId)
   .join(',')}

I have my own selectedItems helper arrray, I have two items with same internalId(but different treeId), but array provided like this does not makes selected the items.

I'm using <RichTreeView /> and expanded and selected props I'm controlling myself:

<RichTreeView
		selectedItems={
			selectedItems
				.filter(item => item.internalId === selectedInternalId)
				.map(item => item.treeId).join(',')}
		expandedItems={selectedItems
			.filter(item => item.expanded)
			.map(item => item.treeId)}
		items={treeViewData}
		slots={{ item: TreeViewNode }}
	/>