React-sortable-hoc: when I write in the input,it unblure every time

[zhongtingbing]

[kumarharsh]

can you provide a working sample in codepen or codesandbox to show what you mean?

[clauderic]

You are likely creating your enhanced SortableElement components within the render method (if so, move it outside of the component definition), or using the key property incorrectly.

[gunn]

I had this problem, but I have to create the enhanced component dynamically. My solution was to use React's memo hook like this:

const DraggableForm = React.useMemo(()=> SortableElement(viewFor(type, "form")), [type])

[cyrus-za]

My components are not created dynamically, so created outside of the render method. I did try @gunn's solution by moving it into the render function with the hook but that does not solve the issue. My keys are unique so that is also not what is causing the rerender. Any help would be appreciated.

Codesandbox: https://codesandbox.io/s/agitated-almeida-jvp6q?fontsize=14

[cyrus-za]

PS. I used immer to handle the immutable state changes but it could just as well be done with a standard Array.slice and destructuring of array or whatever other method to change the state. That is not the source of the problem. It seems to be creating a new div when options change, even if keys stay the same