Custom renderers prevent automatic renaming abort on outside click

[combdn]

Describe the bug When using custom renderers, renaming seems to be automatically aborted only when I click on the other three items. If I click outside of the tree, the renaming input loses focus, but the item is still stuck in the renaming state.

To Reproduce ‘Blueprint JS Renderers’ storybook has the same issue:

https://github.com/lukasbach/react-complex-tree/assets/889260/21218523-051a-4cdd-b45b-cd13922dce35

Expected behaviour ‘Single Tree’ storybook with the default renderers behaves correctly:

https://github.com/lukasbach/react-complex-tree/assets/889260/aeacffeb-cb58-41c2-9096-9c100e8fe7c5

Additional context I’m using Blueprint JS renderers as a starting point, so it might be the same issue as in the storybook.

[lukasbach]

Hey @combdn, thanks for the report! The reason, why the blur-based rename aborting didn't work with the blueprintjs renderers, was because the rename-submit button required registration through a ref, so essentially this was the fix. If this ref is missing, the library can't figure out if the input-blur happened because the user clicked on the submit button, in which case we of course don't want to abort renaming.

The current default is of course not a great one, so as of 2.4.3 I've changed it to still properly abort renaming if the submit button ref was not passed (e.g. if no submit button exists). But if you do have a rename-submit button, you probably also want to add the ref to the button.

[combdn]

Thank you very much for fixing it!

BTW, I’m finding Blueprint JS renderers a great reference. I think they deserve more emphasis in the docs as such.

[lukasbach]

Happy to hear! Good point, yeah they would probably make sense to mention in relation to how to write renderers, I'll expand that docs section.