search

gridstack / gridstack.js

Build interactive dashboards in minutes.
https://gridstackjs.com
MIT License
6.53k stars 1.27k forks source link

All items get animated when deleting one item. React controlled. #2611

Closed lopermo closed 7 months ago

lopermo commented 7 months ago

Subject of the issue

I'm trying to create a controlled grid with widgets as items, unfortunately I run into a problem that I can't find the solution to. Every time I remove an item(widget), the whole grid seems to be rerendered and hence the remaining items(widgets) get animated as if the first render was happening.

Your environment

Steps to reproduce

The actual codebase is much more complex so I tried reducing the code as much as possible. To reproduce, simply remove an item (by hovering over the item and clicking on the trash bin icon on the top left corner) from the grid and see how the remaining items get animated into their current position. https://stackblitz.com/~/edit/stackblitz-starters-xz2qaa?description=The+React+framework+for+production

I've checked, and apparently the animation happens for the items that come after the one being deleted in the state array (widgets). So if you delete the last item, the two remaining will not be animated. If you delete the second item, only the last item will be animated. And if you delete the first one, the other two will be animated.

Expected behavior

The item should be removed, but the animation shouldn't happen. I suspect it maybe that the items may be being rerendered by the useEffect hook with the makeWidget.

lopermo commented 7 months ago

Nevermind, I just realized I forgot the key prop in the Each component, that's what was causing the rerender.