React-beautiful-dnd: Virtual Lists Should Support Long-Press to Select Items on Mobile Devices

[gmattie]

Expected behavior

Users should be able to long-press to select items for drag-and-drop to and from virtual lists on mobile devices. Having to first select an item with one touch and then requiring a second touch to drag the item is counter-intuitive.

Actual behavior

Long-pressing an item causes the item to become selected but not movable. While pressing, attempts to drag the item will cause the list to scroll rather than move the item.

This may not be the intended use for virtual lists with react-beautiful-dnd, but for many users, this is how they expect to be able to drag and drop items on mobile devices, including dragging items from non-virtual lists using react-beautiful-dnd on mobile device.

Steps to reproduce

The easiest way to see this issue is to open any of the CodeSandBox examples listed at react-beautiful-dnd/docs/patterns/virtual-lists.md in Chrome mobile view. Direct links listed below in the Demo section.

Open one of the links in Chrome, open Chrome Dev Tools > Mobile Device Toolbar > Responsive, and resize the view so everything fits on your screen. Long-click/press to select a list item, then try dragging a list item to see the bug.

This problem also occurs on actual hardware (tested on Android 10, Chrome mobile browser). You can build or debug an app that contains react-beautiful-dnd + react-window or simply visit one of the examples on a device using Chrome mobile browser.

Suggested solution

If long-pressing to select and drag an item will not be supported, the item should at least be deselected if the first touchstart is followed by a touchmove. This will ensure that the application doesn't appear bugged by stopping the list from scrolling behind a selected item.

What version of React are you using?

v16.11.0

What version of react-beautiful-dnd are you running?

The examples are using v12.0.0-beta13 and v12.1.0, respectively, but on my own application the bug is still occurring with v13.0.0.

What browser are you using?

Mobile: Chrome version 83.0.4103.106
Desktop: Chrome version 83.0.4103.97

Demo

• Basic LIST on codesandbox.io
• Basic BOARD on codesandbox.io

[Flopscode]

Can confirm. We encountered the same problem and this led me here.

This occurs on all our desktops (via Dev Tools), smartphones and tablets using different versions of Firefox and Chrome.
It's a big problem for the dnd usability on mobile devices.