Input field within a SortableElement loses focus on typing

I have a sorted list of divs. Within these divs, there are a few input fields. The value of these fields are maintained in the state - so every key press triggers a re-render. Everything works as expected, except for the fact that the input loses focus after each key press. See below:

I feel like I’m close to understanding this - but just can’t figure out how to make it work. I’ve read through the issues, and it feels similar to #49. I know you have the shouldCancelStart and distance parameters (with shouldCancelStart defaulting to true for inputs, textareas, etc). But, it doesn’t seem that disabling the drag is the problem (and indeed, perhaps the fact that I have a dragHandle makes these irrelevant).

I also thought that if I make sure everything in the SortableElement has a key, it would re-render and see that it was unchanged, but focus is still lost. Any ideas?

Thanks so much for your work on this project.

[gouxlord]

Ok, i found why this happened in my case.

I was creating the SortableItem and SortableList inside my render method (before return) to make quick lib testing. In this case, classes was created at each render and in this case React reconciliation process discard and replace dom.

So i just needed to use same SortableItem and SortableList classes at each render to avoid this.

[davekiss]

@gouxlord you saved my life