search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.15k stars 2.53k forks source link

Virtual Lists Should Support Long-Press to Select Items on Mobile Devices #1869

Open gmattie opened 4 years ago

gmattie commented 4 years ago

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

Flopscode commented 3 years ago

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.

slewis77 commented 3 years ago

This is a really frustrating one. It ruins the experience using drag and drop on mobile. Otherwise it’s working really well for dnd with a virtual list.

sparlos commented 3 years ago

Man, unfortunate that this hasn't been addressed yet. I'm running into an overflow issue on safari iOS (draggables can't move outside their container when there's overflow) & the suggested solution in another issue is to use the cloning API. It fixes the overflow issue, but introduces this issue, which I can't live with since it basically wrecks the DnD UX on mobile browsers

ruslanzakh commented 3 years ago

Did somebody find a solution or hack for this bug?

timmeade commented 2 years ago

Same issue. Just tried a test and IOS 12.2 and cannot use on IOS. Not sure where to go now. Passed every other test.

mujz commented 2 years ago

Any updates on this? Has anybody been able to find a fix and can share how they did it?