From ad7bd20b2c92334f9e8b5363730cd0dcd7f49c97 Mon Sep 17 00:00:00 2001
From: David Stubbs <david.stubbs@flextrade.com>
Date: Wed, 20 Apr 2016 14:14:31 +0100
Subject: [PATCH] Only apply user-select hack if drag is started

Previously the user-select hack is applied whenever mouseDown on an
element matching the selector, with the right kind of click.

But if the onStart method returns false then the drag is aborted, but
the user-select hack is still applied. Because the drag is not running
the hack is not unapplied on mouseUp. This leads to a whole series of
";user-select: none;; user-select: none;; ..." appearing on the body tag
and the inability to select text on the page until a valid drag happens.

This commit moves the hack application to after the last short circuit
to ensure dragging is actually happening.
---
 example/index.html       |  3 +++
 lib/DraggableCore.es6    |  7 +++----
 specs/draggable.spec.jsx | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/example/index.html b/example/index.html
index 2de857a7..69b224cf 100644
--- a/example/index.html
+++ b/example/index.html
@@ -135,6 +135,9 @@ <h1>React Draggable</h1>
           <Draggable axis="y" {...dragHandlers}>
             <div className="box cursor-y">I can only be dragged vertically</div>
           </Draggable>
+          <Draggable onStart={() => false}>
+            <div className="box">I don't want to be dragged</div>
+          </Draggable>
           <Draggable onDrag={this.handleDrag} {...dragHandlers}>
             <div className="box">
               <div>I track my deltas</div>
diff --git a/lib/DraggableCore.es6 b/lib/DraggableCore.es6
index 0539059b..898bd618 100644
--- a/lib/DraggableCore.es6
+++ b/lib/DraggableCore.es6
@@ -199,10 +199,6 @@ export default class DraggableCore extends React.Component {
       this.setState({touchIdentifier: e.targetTouches[0].identifier});
     }
 
-    // Add a style to the body to disable user-select. This prevents text from
-    // being selected all over the page.
-    if (this.props.enableUserSelectHack) addUserSelectStyles();
-
     // Get the current drag point from the event. This is used as the offset.
     const {x, y} = getControlPosition(e, this);
 
@@ -216,6 +212,9 @@ export default class DraggableCore extends React.Component {
     const shouldUpdate = this.props.onStart(e, coreEvent);
     if (shouldUpdate === false) return;
 
+    // Add a style to the body to disable user-select. This prevents text from
+    // being selected all over the page.
+    if (this.props.enableUserSelectHack) addUserSelectStyles();
 
     // Initiate dragging. Set the current x and y as offsets
     // so we know how much we've moved during the drag. This allows us
diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx
index 822b2417..c0c741f8 100644
--- a/specs/draggable.spec.jsx
+++ b/specs/draggable.spec.jsx
@@ -301,6 +301,24 @@ describe('react-draggable', function () {
       TestUtils.Simulate.mouseUp(node);
       expect(document.body.getAttribute('style')).toEqual('');
     });
+
+    it('should not add and remove user-select styles when onStart returns false', function () {
+      function onStart() { return false; }
+
+      drag = TestUtils.renderIntoDocument(
+        <Draggable onStart={onStart}>
+          <div />
+        </Draggable>
+      );
+
+      var node = ReactDOM.findDOMNode(drag);
+
+      expect(document.body.getAttribute('style')).toEqual('');
+      TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
+      expect(document.body.getAttribute('style')).toEqual('');
+      TestUtils.Simulate.mouseUp(node);
+      expect(document.body.getAttribute('style')).toEqual('');
+    });
   });
 
   describe('interaction', function () {