hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.31k stars 91 forks source link

Drop animation sometimes land 1 item below where it should be #821

Open George-Huang-Unleashed opened 1 month ago

George-Huang-Unleashed commented 1 month ago

Expected behavior

The drop animation should land in the correct spot

Actual behavior

Sometimes the drop animation land 1 item below where it should be. Mostly happen when it's dragged between items It seems like if you drag from below and drop it in the spot it tends to work correctly. But not when you drag from above to where you want the item to sit. Even though the animation looks wrong the item still ends up in the right spot

I am using react-window and react-virtualized-auto-sizer. Not sure if this might be causing the issue

Steps to reproduce

  1. Drag an item to a different spot (or even circle back to the same spot)
  2. Navigate where you want it to sit from above
  3. Drop the item - the animation will show it landing lower than where it should be

Suggested solution?

No idea. Maybe somehow improve the drop location recognition?

What version of React are you using?

18.3.1

What version of @hello-pangea/dnd are you running?

16.5.0

What browser are you using?

Chrome

Demo

https://codesandbox.io/p/devbox/recursing-brahmagupta-mgkdp7