[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! 👍🏼