Glitchy animation when dropping item

See original GitHub issue

Hi, I am experiencing a weird animation when sorting a list of elements. I cannot provide the exact codebase, but I have built it on top of the story presets > sortable > multiple containers > many items.

Here below you can see a video of the problem. Notice how the<DragOverlay /> falls correctly into place, while the remaining elements shifts up in a weird way.

https://user-images.githubusercontent.com/12138301/170713994-dcf7dbbc-0bea-4e37-b107-e7b51cef15a2.mov

I have spent quite some time trying to track down the problem, but with no result so far. Anybody has idea of what could be the cause?

Thanks.

Issue Analytics

State:
Created a year ago
Comments:11 (5 by maintainers)

Top GitHub Comments

3reactions

claudericcommented, May 30, 2022

@MTxx87 the problem in your case is that you are not using a stable key property. You are passing the index as the key property to your list items, which causes them to unmount and re-mount when the order of the list changes.

Use the unique id property of your items instead as the key:

https://codesandbox.io/s/rough-cookies-53w0rj?file=/src/Items.tsx

You can read more about using stable keys here:

https://reactjs.org/docs/lists-and-keys.html#keys

1reaction

MTxx87commented, May 30, 2022

@clauderic It worked when adding the proper key. Thank you!