react-arborist
react-arborist copied to clipboard
Keyboard navigation breaks when pressing Enter on a Node that doesn't render a text input
You can reproduce this behavior on the "controlled tree" demo.
Steps to reproduce:
- Tab to get focus on first node
- When focused on any node, press Enter
Result:
Doing so effectively breaks the tree: Pressing up and down scrolls the page instead of navigating the tree nodes. Opening/closing folders is not possible via keyboard. The cause seems to be that there is not <input> rendered when Enter is pressed, so the Tree gets stuck into a bad state.
My two cents: I was expecting (and haven't found) a way to disable the inline renaming functionality. In the same way that disableDrag exists, I think disableRename would be valuable and would be a way to avoid this bad state. At least for our use case, we would like to render a tree where the user cannot edit the node text.
Nice lib btw.
I triggered this bug too by accident when trying the demos.
Yeah this makes sense. I guess there's no way for the tree to know if the user has provided an input to render, even if they did provide an onRename handler.
Yeah, disableRename might be needed.
I was expecting (and haven't found) a way to disable the inline renaming functionality
Turns out I was using initialData instead of data. By using the below options, I was able to get a tree going without rename functionality:
data={treeData}
onRename={undefined}
Going to leave this ticket as is since I think it does capture an awkward edge case, but it's not as dire as I had initially thought: You can make a tree without being forced into rename functionality.