search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.08k stars 1.26k forks source link

[tree view] Label editing with custom `TreeItem` #14674

Open KaralyosBela opened 2 days ago

KaralyosBela commented 2 days ago

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 commented 2 days ago

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: https://github.com/mui/mui-x/blob/b907bb5ae388b8e975c838f4ad188bfacefe9f94/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx#L90-L106

And then render an input based on the editable property. Like this: https://github.com/mui/mui-x/blob/b907bb5ae388b8e975c838f4ad188bfacefe9f94/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx#L174-L180

[!WARNING] The label editing feature is still experimental. Any future release might include breaking changes.

KaralyosBela commented 1 day ago

Thanks! It works with this solution! :) Another question regarding label edit: if this option is enabled, is there any way to collapse/extend the tree menu item on clicking anywhere other than the collapse/extend icon? Or is this limited with this feature?

michelengelen commented 1 day ago

I guess this might be possible, but only with a high level of customization.

One idea would be to disable the double click on the custom label element and only allow entering the editing state by pressing ENTER

@flaviendelangle can we support something like this?

flaviendelangle commented 1 day ago

is there any way to collapse/extend the tree menu item on clicking anywhere other than the collapse/extend icon? Or is this limited with this feature?

You can choose what is triggering the expand/collapse with the expansionTrigger prop. It would not work well with the default editing behavior, but you can try to customize yours to have something that works correctly (probably with an icon to start the editing).

KaralyosBela commented 1 day ago

Thanks guys!