[tree view] Handle onClick on a RichTreeView item

[rgavrilov]

The problem in depth

I would like to configure my RichTreeView using its items property and then supply a handler that would receive a selected item.

 <RichTreeView items={treeViewItems} slots={{ item: TreeItem2 }} />

My current solution is to capture and store in a state the focused item, and then use that state from inside onClick attached to the tree item using slotProps={ item: { ...

Notice that my item has two pieces of information I need, so I have to combine them into a single string and then parse it out:

                onItemFocus={(e, itemId) => {
                    const [calculator, assetId] = itemId.split('/');
                    if (assetId) {
                        setSelectedResult(results[calculator][assetId]);
                    } else {
                        setSelectedResult(undefined);
                    }
                }}

                slotProps={{
                    item: {
                        onClick: () => {
                            if (selectedResult) {
                                modal.show(selectedResult);
                                ...

I know I can render TreeItem2 children explicitly, but that is not as neat.

Ideally, I would like to have onItemClick handler, similar to onItemFocus, that would receive the whole item from the items collection.

Your environment

`npx @mui/envinfo`

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

Search keywords: RichTreeView Order ID: 52426

[michelengelen]

@flaviendelangle should we keep this issue open to track the implementation of an onItemClick handler? Or will it be tracked on #12839?

[flaviendelangle]

I think we should keep both for now, depending on what we decide for #12839, onItemClick might not be covered there :+1:

[michelengelen]

Ok, in that case lets add this to the board as a feature request/enhancement! 👍🏼

[Cadogantes]

+1, getting just a string with id instead of a selected item is quite inconvenient

[flaviendelangle]

@Cadogantes does this doc section solve your problem?

If not, could you describe it more in depth so that we can adress it properly?

If it does, I think we will close this issue :+1:

[Cadogantes]

@flaviendelangle Oh yes, this seems to be a solution! Thanks!

[github-actions[bot]]

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] We value your feedback @rgavrilov! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!