dnd: when dragging, stop propagation to potential parent draggables (#4601)

* dnd: when dragging, stop propagation to potential parent draggables

* dnd: fix spelling typo

* dnd: attempt to add test for nested dragging

* dnd: fix missing dataTransfer var in test

* dnd: add stopPropagation to onDrag and onDragEnd

---------

Co-authored-by: Daniel Lu <[email protected]>
Co-authored-by: Yihui Liao <[email protected]>

Author: 3 people

packages/@react-aria/dnd/src/useDrag.ts

@@ -92,6 +92,9 @@ export function useDrag(options: DragOptions): DragResult {
       return;
     }
 
+    // Prevent the drag event from propagating to any parent draggables
+    e.stopPropagation();
+
     // If this drag was initiated by a mobile screen reader (e.g. VoiceOver or TalkBack), enter virtual dragging mode.
     if (modalityOnPointerDown.current === 'virtual') {
       e.preventDefault();
@@ -164,6 +167,9 @@ export function useDrag(options: DragOptions): DragResult {
   };
 
   let onDrag = (e: DragEvent) => {
+    // Prevent the drag event from propagating to any parent draggables
+    e.stopPropagation();
+
     if (e.clientX === state.x && e.clientY === state.y) {
       return;
     }
@@ -181,6 +187,9 @@ export function useDrag(options: DragOptions): DragResult {
   };
 
   let onDragEnd = (e: DragEvent) => {
+    // Prevent the drag event from propagating to any parent draggables
+    e.stopPropagation();
+
     if (typeof options.onDragEnd === 'function') {
       let event: DragEndEvent = {
         type: 'dragend',

packages/@react-aria/dnd/test/dnd.test.js

@@ -334,6 +334,40 @@ describe('useDrag and useDrop', function () {
         expect(onDropExit).toHaveBeenCalledTimes(1);
       });
 
+      describe('nested drag targets', () => {
+        let onDragStartParent = jest.fn();
+        let onDragMoveParent = jest.fn();
+        let onDragEndParent = jest.fn();
+        let onDragStartChild = jest.fn();
+        let onDragMoveChild = jest.fn();
+        let onDragEndChild = jest.fn();
+
+        function renderNestedDrag() {
+          return render(
+            <Draggable onDragStart={onDragStartParent} onDragMove={onDragMoveParent} onDragEnd={onDragEndParent}>
+              <Draggable onDragStart={onDragStartChild} onDragMove={onDragMoveChild} onDragEnd={onDragEndChild}>
+                Drag me child
+              </Draggable>
+            </Draggable>
+          );
+        }
+
+        it('does not trigger parent drag when dragging child', () => {
+          let tree = renderNestedDrag();
+          let draggableChild = tree.getByText('Drag me child');
+
+          let dataTransfer = new DataTransfer();
+          fireEvent(draggableChild, new DragEvent('drag', {dataTransfer, clientX: 1, clientY: 1}));
+          expect(onDragMoveParent).not.toHaveBeenCalled();
+          expect(onDragMoveChild).toHaveBeenCalledTimes(1);
+          expect(onDragMoveChild).toHaveBeenCalledWith({
+            type: 'dragmove',
+            x: 1,
+            y: 1
+          });
+        });
+      });
+
       describe('nested drop targets', () => {
         let onDropParent = jest.fn();
         let onDropEnterParent = jest.fn();