[tree view] Label editing with custom TreeItem

[KaralyosBela]

The problem in depth

I'm having trouble getting the labelEditing experimental feature to work with a custom TreeItem when using RichTreeViewPro. According to the MUI documentation, there's an example of using a custom TreeItem with the RichTreeViewPro component here. However, when I add the experimentalFeatures={{ labelEditing: true }} and the isItemEditable part, it doesn't seem to function as expected.

Am I missing something, or is there an additional step I need to take to make this work?

Your environment

Chrome
"@mui/base": "^5.0.0-beta.26",
"@mui/icons-material": "^5.14.19",
"@mui/lab": "5.0.0-alpha.141",
"@mui/material": "^5.15.14",
"@mui/styles": "^5.14.20",
"@mui/x-data-grid-premium": "^7.15.0",
"@mui/x-license": "^7.0.0",
"@mui/x-tree-view": "^7.2.0",
"@mui/x-tree-view-pro": "^7.16.0",

`npx @mui/envinfo`

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

Search keywords: rich tree view, label renaming, custom tree item
Order ID: 86461

[michelengelen]

This is because the custom label does not change between editing state and normal state. For this to work you need to get the itemState like this:

mui-x/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx

Lines 90 to 106 in b907bb5

	const {
	disabled,
	expanded,
	selected,
	focused,
	editing,
	editable,
	disableSelection,
	checkboxSelection,
	handleExpansion,
	handleSelection,
	handleCheckboxSelection,
	handleContentClick,
	preventSelection,
	expansionTrigger,
	toggleItemEditing,
	} = useTreeItemState(itemId);

And then render an input based on the editable property. Like this:

mui-x/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx

Lines 174 to 180 in b907bb5

	{editing ? (
	<TreeItem2LabelInput {...labelInputProps} className={classes.labelInput} />
	) : (
	<div className={classes.label} {...(editable && { onDoubleClick: handleLabelDoubleClick })}>
	{label}
	</div>
	)}

Warning

The label editing feature is still experimental. Any future release might include breaking changes.