Drag and drop not working as intended on mobile devices when using react-beautiful-dnd with react-virtuoso

[lukasagurkas]

Description: Issue with drag and drop using react-virtuoso with react-beautiful-dnd on mobile (works fine with a mouse or laptop touchpad). The issue is that you have to hold the drag handle of the list item, then when an indicator appears showing that the list item is being dragged, you have to let go of the list item and only then can you drag the item. Using a mouse or a laptop touchpad you have to press on the drag handle of the list item you have want to drag and you can start dragging (while holding down the mouse button). This behavious is not observable using just react-beautiful-dnd (without react-virtuoso).

Reproduction: https://codesandbox.io/p/devbox/react-beautiful-dnd-react-virtuoso-vlzcrn Code copied from https://github.com/petyosi/react-virtuoso/blob/master/examples/react-beautiful-dnd.tsx

To Reproduce:

• On a computer:

  1) Go to the codesandbox link 2) Click on "Open in a new tab" 3) Open ChromeDevTools 4) Click on "Toggle device toolbar" 5) Choose any mobile device 6) Try to drag

• On a mobile device:

  1) Go to the codesandbox link 2) Try to drag

Expected behavior: https://codesandbox.io/p/sandbox/k260nyxq9v?file=%2Findex.js Taken from https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/about/examples.md

Desktop:

• OS: Windows 10
• Broswer Google Chrome Version 125.0.6422.142 (Official Build) (64-bit)

[petyosi]

Sorry, I have absolutely no capacity to support or troubleshoot the beautiful DND integration. I'm also uncertain if the beautiful DND project is not abandoned. If you figure out something, please update the issue.

[lukasagurkas]

I was mistaken the issue is not caused by react-virtuoso, it is an issue with react-beautiful-dnd. I have raised a new issue with the new maintainers of react-beautiful-dnd (@hello-pangea/dnd (issue # 801))