feat(touch): more robust solution for touch body scrolling (#470)

We now simply cancel the 'touchstart' event. As of Chrome >= 56,
this has to be done on event handlers that explicitly specify
`{passive: false}`.

Fixes #227, #435, #351, #406, #412, #279, redux #165

Author: STRML

lib/DraggableCore.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import {matchesSelectorAndParentsTo, addEvent, removeEvent, addUserSelectStyles, getTouchIdentifier,
-        removeUserSelectStyles, styleHacks} from './utils/domFns';
+        removeUserSelectStyles} from './utils/domFns';
 import {createCoreData, getControlPosition, snapToGrid} from './utils/positionFns';
 import {dontSetMe} from './utils/shims';
 import log from './utils/log';
@@ -226,6 +226,12 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
   componentDidMount() {
     this.mounted = true;
+    // Touch handlers must be added with {passive: false} to be cancelable.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+    const thisNode = ReactDOM.findDOMNode(this);
+    if (thisNode) {
+      addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {passive: false});
+    }
   }
 
   componentWillUnmount() {
@@ -239,6 +245,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
       removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
       removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
       removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
+      removeEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {passive: false});
       if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument);
     }
   }
@@ -265,6 +272,10 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
       return;
     }
 
+    // Prevent scrolling on mobile devices, like ipad/iphone.
+    // Important that this is after handle/cancel.
+    if (e.type === 'touchstart') e.preventDefault();
+
     // Set touch identifier in component state if this is a touch event. This allows us to
     // distinguish between individual touches on multitouch screens by identifying which
     // touchpoint was set to this element.
@@ -309,9 +320,6 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
   handleDrag: EventHandler<MouseTouchEvent> = (e) => {
 
-    // Prevent scrolling on mobile devices, like ipad/iphone.
-    if (e.type === 'touchmove') e.preventDefault();
-
     // Get the current drag point from the event. This is used as the offset.
     const position = getControlPosition(e, this.state.touchIdentifier, this);
     if (position == null) return;
@@ -418,13 +426,15 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return React.cloneElement(React.Children.only(this.props.children), {
-      style: styleHacks(this.props.children.props.style),
+      style: this.props.children.props.style,
 
       // Note: mouseMove handler is attached to document so it will still function
       // when the user drags quickly and leaves the bounds of the element.
       onMouseDown: this.onMouseDown,
-      onTouchStart: this.onTouchStart,
       onMouseUp: this.onMouseUp,
+      // onTouchStart is added on `componentDidMount` so they can be added with
+      // {passive: false}, which allows it to cancel. See 
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
       onTouchEnd: this.onTouchEnd
     });
   }

lib/utils/domFns.js

@@ -180,15 +180,6 @@ export function removeUserSelectStyles(doc: ?Document) {
   }
 }
 
-export function styleHacks(childStyle: Object = {}): Object {
-  // Workaround IE pointer events; see #51
-  // https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
-  return {
-    touchAction: 'none',
-    ...childStyle
-  };
-}
-
 export function addClassName(el: HTMLElement, className: string) {
   if (el.classList) {
     el.classList.add(className);

specs/draggable.spec.jsx

@@ -31,7 +31,7 @@ describe('react-draggable', function () {
   afterEach(function() {
     try {
       TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag)); // reset user-select
-      React.unmountComponentAtNode(ReactDOM.findDOMNode(drag).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(drag).parentNode);
     } catch(e) { return; }
   });
 
@@ -52,8 +52,9 @@ describe('react-draggable', function () {
       drag = (<Draggable><div className="foo" style={{color: 'black'}}/></Draggable>);
 
       const node = renderToNode(drag);
+      // Touch-action hack has been removed
       if ('touchAction' in document.body.style) {
-        assert(node.getAttribute('style').indexOf('touch-action: none') >= 0);
+        assert(node.getAttribute('style').indexOf('touch-action: none') === -1);
       }
       assert(node.getAttribute('style').indexOf('color: black') >= 0);
       assert(new RegExp(transformStyle + ': translate\\(0px(?:, 0px)?\\)').test(node.getAttribute('style')));
@@ -600,6 +601,48 @@ describe('react-draggable', function () {
       resetDragging(drag);
     });
 
+    it('should initialize dragging ontouchstart', function () {
+      drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);
+
+      // Need to dispatch this ourselves as there is no onTouchStart handler (due to passive)
+      // so TestUtils.Simulate will not work
+      const e = new Event('touchstart');
+      ReactDOM.findDOMNode(drag).dispatchEvent(e);
+      assert(drag.state.dragging === true);
+    });
+
+    it('should call preventDefault on touchStart event', function () {
+      drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);
+
+      const e = new Event('touchstart');
+      // Oddly `e.defaultPrevented` is not changing here. Maybe because we're not mounted to a real doc?
+      let pdCalled = false;
+      e.preventDefault = function() { pdCalled = true; };
+      ReactDOM.findDOMNode(drag).dispatchEvent(e);
+      assert(pdCalled);
+      assert(drag.state.dragging === true);
+    });
+
+    it('should not call preventDefault on touchStart event if not on handle', function () {
+      drag = TestUtils.renderIntoDocument(
+        <Draggable handle=".handle">
+          <div>
+            <div className="handle">
+              <div><span><div className="deep">Handle</div></span></div>
+            </div>
+            <div className="content">Lorem ipsum...</div>
+          </div>
+        </Draggable>
+      );
+
+      const e = new Event('touchstart');
+      let pdCalled = false;
+      e.preventDefault = function() { pdCalled = true; };
+      ReactDOM.findDOMNode(drag).querySelector('.content').dispatchEvent(e);
+      assert(!pdCalled);
+      assert(drag.state.dragging !== true);
+    });
+
     it('should modulate position on scroll', function (done) {
       let dragCalled = false;