search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.26k stars 301 forks source link

[BUG] dnd example Does not work when rows have different heights #967

Open 55Cancri opened 1 year ago

55Cancri commented 1 year ago

If the rows are dynamic heights, the list will jump around a lot, especially if you move cards across large distances (~50 items). Also it is impossible to drag a card to the bottom as it stops halfway.

Here is a codesandbox: https://codesandbox.io/s/react-virutoso-with-react-beautiful-dnd-forked-dynamic-heights-hhjcx8

Steps to reproduce the behavior:

  1. Grab a small card from the top
  2. Try to drag down at least 50-100 cards
  3. Notice the list jumps by a large margin from where you originally dropped the card
  4. Now try dragging a card to the bottom of the list
  5. Notice it gets stuck about halfway, meaning it is not possible to drag cards to the bottom if the card heights are different sizes

Expected behavior No jumpiness expected. I suspect it means the height measurements are inaccurate somewhere.

petyosi commented 1 year ago

Honestly, no idea about this. The example uses a very old version of Virtuoso, and as far as I can tell, the dnd library went from unmaintained to a couple of major versions from when this example was created.

As much as I want to help here, this is more in the space of the dnd library itself, it had some "magic" about virtualization as far as I remember.

Feel free to investigate - happy to accept a contribution with an up-to-date example. It's unlikely that I will get to that any time soon, though.

55Cancri commented 1 year ago

@petyosi yes you are right, but even after updating to the now maintained version of that library (@hello-pangea/dnd), as well as updating all the other dependencies, the issue still persists.

Regardless, since you believe this is an issue with the dnd library rather react-virtuoso then I have opened an issue there as well https://github.com/hello-pangea/dnd/issues/648.

I will keep poking at the issue although I'm not able to explore the internals of either library at the moment. However, if I find a solution I will post it here.