How to Enable Renaming with custom renderItem and renderItemTitle #390
-
It seems like renaming is disabled or doesn't work when you create your own renderItem / renderItemTitle function. Are we supposed to implement the renaming feature entirely when I provide a renderItemTitle function? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
You might want to make sure to set the interactive in a tree item render method only to a button when it is not in a renaming state, if you are not already doing that. I noticed that was the issue in the docs for custom render methods, I fixed that there. If that is not working for you, please send me your implementation of your render methods, so I can see what is going wrong. renderItem={({ title, arrow, depth, context, children }) => {
const InteractiveComponent = context.isRenaming ? 'div' : 'button';
return (
<>
<li
{...context.itemContainerWithChildrenProps}
>
<InteractiveComponent
{...context.itemContainerWithoutChildrenProps}
{...context.interactiveElementProps}
>
{ arrow }
{ title }
</InteractiveComponent>
</li>
{children}
</>
);
}} |
Beta Was this translation helpful? Give feedback.
You might want to make sure to set the interactive in a tree item render method only to a button when it is not in a renaming state, if you are not already doing that. I noticed that was the issue in the docs for custom render methods, I fixed that there. If that is not working for you, please send me your implementation of your render methods, so I can see what is going wrong.