Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
55Cancri opened this issue Aug 19, 2023 · 2 comments
Open

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

55Cancri opened this issue Aug 19, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@55Cancri
Copy link

55Cancri commented Aug 19, 2023

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.

@55Cancri 55Cancri added the bug Something isn't working label Aug 19, 2023
@55Cancri 55Cancri changed the title [BUG] Does not work with dynamic height. [BUG] Does not work when rows have different heights Aug 19, 2023
@petyosi
Copy link
Owner

petyosi commented Aug 19, 2023

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.

@petyosi petyosi changed the title [BUG] Does not work when rows have different heights [BUG] dnd example Does not work when rows have different heights Aug 19, 2023
@55Cancri
Copy link
Author

55Cancri commented Aug 19, 2023

@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 hello-pangea/dnd#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants