fixing nested touch dragging (#175)

Fixing nested dragging on touch devices

src/view/drag-handle/sensor/create-mouse-sensor.js

@@ -209,6 +209,7 @@ export default (callbacks: Callbacks, getDraggableRef: () => ?HTMLElement): Mous
       return;
     }
 
+    // stopping the event from publishing to parents
     stopEvent(event);
     const point: Position = {
       x: clientX,

src/view/drag-handle/sensor/create-touch-sensor.js

@@ -263,8 +263,12 @@ export default (callbacks: Callbacks, getDraggableRef: () => ?HTMLElement): Touc
       return;
     }
 
-    // Not stopping the event as we want to allow force press and other events to occur
-    // Scrolling is stopped by onTouchMove
+    // We need to stop parents from responding to this event - which may cause a double lift
+    // We also need to NOT call event.preventDefault() so as to maintain as much standard
+    // browser interactions as possible.
+    // event.preventDefault() in an onTouchStart blocks almost
+    // every other event including force press
+    event.stopPropagation();
 
     startPendingDrag(event);
   };

src/view/draggable/connected-draggable.js

@@ -57,6 +57,12 @@ const defaultMapProps: MapProps = {
   direction: null,
 };
 
+// $ExpectError - using spread
+const preLiftMapProps: MapProps = {
+  ...defaultMapProps,
+  canLift: false,
+};
+
 export const makeSelector = (): Selector => {
   const idSelector = (state: State, ownProps: OwnProps): DraggableId => ownProps.draggableId;
   const typeSelector = (state: State, ownProps: OwnProps): TypeId => ownProps.type || 'DEFAULT';
@@ -216,6 +222,11 @@ export const makeSelector = (): Selector => {
         };
       }
 
+      // a lift is in progress - do not let anything start a lift
+      if (phase === 'PREPARING' || phase === 'COLLECTING_DIMENSIONS') {
+        return preLiftMapProps;
+      }
+
       // All unhandled phases
       return defaultMapProps;
     },

test/unit/view/connected-draggable.spec.js

@@ -1073,12 +1073,18 @@ describe('Draggable - connected', () => {
       });
     });
 
-    describe('other phases', () => {
-      it('should return the default props', () => {
-        const phases: Phase[] = ['IDLE', 'COLLECTING_DIMENSIONS'];
+    describe('pre lift', () => {
+      // $ExpectError - using spread
+      const preLiftMapProps: MapProps = {
+        ...defaultMapProps,
+        canLift: false,
+      };
+
+      it('should prevent other draggables from lifting', () => {
+        const preLiftPhases: Phase[] = ['PREPARING', 'COLLECTING_DIMENSIONS'];
         const { id, type, selector } = make();
 
-        phases.forEach((phase: Phase): void => {
+        preLiftPhases.forEach((phase: Phase): void => {
           const props: MapProps = execute(selector)({
             id,
             type,
@@ -1088,10 +1094,27 @@ describe('Draggable - connected', () => {
             dimension: null,
           });
 
-          expect(props).toEqual(defaultMapProps);
+          expect(props).toEqual(preLiftMapProps);
         });
       });
     });
+
+    describe('idle', () => {
+      it('should return the default map props', () => {
+        const { id, type, selector } = make();
+
+        const props: MapProps = execute(selector)({
+          id,
+          type,
+          phase: 'IDLE',
+          drag: null,
+          pending: null,
+          dimension: null,
+        });
+
+        expect(props).toEqual(defaultMapProps);
+      });
+    });
   });
 
   describe('selector isolation', () => {

test/unit/view/drag-handle.spec.js

@@ -1641,6 +1641,22 @@ describe('drag handle', () => {
             onLift: 1,
           })).toBe(true);
         });
+
+        it('should not call preventDefault on the initial touchstart', () => {
+          const mockEvent: MockEvent = createMockEvent();
+
+          touchStart(wrapper, origin, 0, mockEvent);
+
+          expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        });
+
+        it('should call stopPropagation on the initial touchstart to prevent parents from starting', () => {
+          const mockEvent: MockEvent = createMockEvent();
+
+          touchStart(wrapper, origin, 0, mockEvent);
+
+          expect(mockEvent.stopPropagation).toHaveBeenCalled();
+        });
       });
 
       describe('starting with movement', () => {