Rename tree item on DoubleClick

[jolic]

I see that a rename can be triggered with a function key.
I would like to use a double click on the tree item.

How can that be implemented?

[lukasbach]

This can be implemented by attaching your own double click handler to the rendered tree item element and calling item.startRenaming().

I added a Storybook example that demonstrates that:
https://github.com/lukasbach/headless-tree/blob/main/packages/sb-react/src/renaming/custom-click-behavior.stories.tsx

Deployed example:
https://headless-tree.lukasbach.com/storybook/react/?path=/story/react-renaming-custom-click-behavior--custom-click-behavior

The example shows two ways to approach this, either with custom handlers, or with a custom feature to handle the behavior in a reusable manner.

[jolic]

Lukas, thank you for the examples.

When I try the example @ https://headless-tree.lukasbach.com/storybook/react/?path=/story/react-renaming-custom-click-behavior--custom-click-behavior I see a small misbehaviour:

When I double click on a tree item (not folder) it changes into the edit mode.
But when I double click on a folder first the folder opens and shows all children then closes the folder and then goes into edit mode.

Is there a way to stop that?

The click on a folder should be disabled if a double click was triggered.