cannot swipe: delayed touch start on mobile and unwanted autoscrolling of page during touch move

[repenning]

Expected behavior

Touch based drag and drop should be snappy on mobile devices (e.g., iOS 12). Users should be able to swipe, i.e., to touch component and move instantly without waiting for some selection feedback.

Examples of dnd-list show how UX should be (dnd-list from baseweb)

This applies to all examples I have tried: they work well on my Mac with mouse events but are close to unusable on mobile devices such as iPhone with iOS 12 with touch events. The same is not true for dnd-list by baseweb (However, I prefer the design and flexibility of rbd).

Actual behavior

UX: touch appears to take long time to register (feels like 0.5 sec or greater). Dragging, i.e., touchmove, also triggers unwanted web page scrolling. Super annoying.

Steps to reproduce

Run any example of rbd on iPhones and compare to similar example of dnd-list

sandbox

Suggested solution?

• looks like there is some timer between touchstart and triggering of the drag event. Remove this delay or make this configurable.
• prevent accidental scrolling. Dnd-list does something like this:

canvas.addEventListener("touchmove", e => {
    e.preventDefault();
    e.stopImmediatePropagation();
  },
  {passive: false});

What version of React are you using?

16.5.2

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

9.0.2

What browser are you using?

mobile safari iOS 12

Demo

sandbox

[trevyn]

Dupe of #415?