Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How to Enable Renaming with custom renderItem and renderItemTitle #390

Answered by lukasbach
doming-dev asked this question in Q&A
Discussion options

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?

You must be logged in to vote

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}
 {...

Replies: 1 comment 1 reply

Comment options

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}
 </>
 );
}}
You must be logged in to vote
1 reply
Comment options

Yes, that was it. I added that to my implementation, and renaming is working properly now.
Thank you for the response!

Answer selected by doming-dev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /