Dragged item disappears on scroll up/down

[xiom84]

Hi,

when i drag an item and scroll down or up the dragged item disappears when the movement is larger than the timeline height.

[samuelarbibe]

Hey, on what exact example are you experiencing it? And are you using virtualization?

[xiom84]

For example here directly on the demo page: https://www.dnd-timeline.com/

Yes you are right it seems to be the virtualization examples which are failing.
-> https://dnd-timeline-virtual.vercel.app/

(I tried another computer and different browsers (firefox, chrome) with the same result.)

[samuelarbibe]

Ok, so here is the deal:
When using tanstack/virtual, only rows that are in the visible area are rendered.
This means, that when an item is dragged from a visible row, and that row becomes invisible because of scrolling, that row will unmount and the item itself will unmount as well.

The solution comes from @tanstack/virtual:
https://tanstack.com/virtual/latest/docs/api/virtualizer#rangeextractor
You can help the library understand which rows should and shouldn't be rendered by using the rangeExtractor props, and make sure the library never unmounts a row whose item is currently being dragged.

Anyway, I will make sure to implement this fix in the example and demo page ASAP, and update you.

[xiom84]

Sounds fantastatic

Thanks for the incredible fast solution.

[samuelarbibe]

Fixed! the demo page will be fixed as well soon.
Check out the code for the "virtual" example, it should help you.

https://dnd-timeline-virtual.vercel.app

[xiom84]

Perfect thanks, that helps a lot.