Drag and drop bug fixes (#3391)

Author: devongovett

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

@@ -75,7 +75,8 @@ export function beginDragging(target: DragTarget, stringFormatter: LocalizedStri
       getDragModality() === 'keyboard' ||
       (getDragModality() === 'touch' && getInteractionModality() === 'virtual')
     ) {
-      dragSession.next();
+      let target = dragSession.findNearestDropTarget();
+      dragSession.setCurrentDropTarget(target);
     }
   });
 
@@ -411,6 +412,25 @@ class DragSession {
     }
   }
 
+  findNearestDropTarget(): DropTarget {
+    let dragTargetRect = this.dragTarget.element.getBoundingClientRect();
+
+    let minDistance = Infinity;
+    let nearest = null;
+    for (let dropTarget of this.validDropTargets) {
+      let rect = dropTarget.element.getBoundingClientRect();
+      let dx = rect.left - dragTargetRect.left;
+      let dy = rect.top - dragTargetRect.top;
+      let dist = (dx * dx) + (dy * dy);
+      if (dist < minDistance) {
+        minDistance = dist;
+        nearest = dropTarget;
+      }
+    }
+
+    return nearest;
+  }
+
   setCurrentDropTarget(dropTarget: DropTarget, item?: DroppableItem) {
     if (dropTarget !== this.currentDropTarget) {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {

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

@@ -0,0 +1,90 @@
+import {Collection, DropTarget, DropTargetDelegate, Node} from '@react-types/shared';
+import {RefObject} from 'react';
+
+export class ListDropTargetDelegate implements DropTargetDelegate {
+  private collection: Collection<Node<unknown>>;
+  private ref: RefObject<HTMLElement>;
+
+  constructor(collection: Collection<Node<unknown>>, ref: RefObject<HTMLElement>) {
+    this.collection = collection;
+    this.ref = ref;
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    if (this.collection.size === 0) {
+      return;
+    }
+
+    let rect = this.ref.current.getBoundingClientRect();
+    x += rect.x;
+    y += rect.y;
+
+    let elements = this.ref.current.querySelectorAll('[data-key]');
+    let elementMap = new Map<string, HTMLElement>();
+    for (let item of elements) {
+      if (item instanceof HTMLElement) {
+        elementMap.set(item.dataset.key, item);
+      }
+    }
+
+    let items = [...this.collection];
+    let low = 0;
+    let high = items.length;
+    while (low < high) {
+      let mid = Math.floor((low + high) / 2);
+      let item = items[mid];
+      let element = elementMap.get(String(item.key));
+      let rect = element.getBoundingClientRect();
+
+      if (y < rect.top) {
+        high = mid;
+      } else if (y > rect.bottom) {
+        low = mid + 1;
+      } else {
+        let target: DropTarget = {
+          type: 'item',
+          key: item.key,
+          dropPosition: 'on'
+        };
+
+        if (isValidDropTarget(target)) {
+          // Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px
+          // of the top or bottom of the item.
+          if (y <= rect.top + 5 && isValidDropTarget({...target, dropPosition: 'before'})) {
+            target.dropPosition = 'before';
+          } else if (y >= rect.bottom - 5 && isValidDropTarget({...target, dropPosition: 'after'})) {
+            target.dropPosition = 'after';
+          }
+        } else {
+          // If dropping on the item isn't accepted, try the target before or after depending on the y position.
+          let midY = rect.top + rect.height / 2;
+          if (y <= midY && isValidDropTarget({...target, dropPosition: 'before'})) {
+            target.dropPosition = 'before';
+          } else if (y >= midY && isValidDropTarget({...target, dropPosition: 'after'})) {
+            target.dropPosition = 'after';
+          }
+        }
+
+        return target;
+      }
+    }
+
+    let item = items[Math.min(low, items.length - 1)];
+    let element = elementMap.get(String(item.key));
+    rect = element.getBoundingClientRect();
+
+    if (Math.abs(y - rect.top) < Math.abs(y - rect.bottom)) {
+      return {
+        type: 'item',
+        key: item.key,
+        dropPosition: 'before'
+      };
+    }
+
+    return {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'after'
+    };
+  }
+}

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

@@ -18,6 +18,7 @@ export type {DragPreviewProps} from './DragPreview';
 export type {DragOptions, DragResult} from './useDrag';
 export type {DropOptions, DropResult} from './useDrop';
 export type {ClipboardProps, ClipboardResult} from './useClipboard';
+export type {DropTargetDelegate} from '@react-types/shared';
 
 export {useDrag} from './useDrag';
 export {useDrop} from './useDrop';
@@ -27,3 +28,4 @@ export {useDropIndicator} from './useDropIndicator';
 export {useDraggableItem} from './useDraggableItem';
 export {useClipboard} from './useClipboard';
 export {DragPreview} from './DragPreview';
+export {ListDropTargetDelegate} from './ListDropTargetDelegate';

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

@@ -20,14 +20,24 @@ import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DropOptions {
   ref: RefObject<HTMLElement>,
+  /**
+   * A function returning the drop operation to be performed when items matching the given types are dropped
+   * on the drop target.
+   */
   getDropOperation?: (types: IDragTypes, allowedOperations: DropOperation[]) => DropOperation,
   getDropOperationForPoint?: (types: IDragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation,
+  /** Handler that is called when a valid drag enters the drop target. */
   onDropEnter?: (e: DropEnterEvent) => void,
+  /** Handler that is called when a valid drag is moved within the drop target. */
   onDropMove?: (e: DropMoveEvent) => void,
-  // When the user hovers over the drop target for a period of time.
-  // typically opens that item. macOS/iOS call this "spring loading".
+  /**
+   * Handler that is called after a valid drag is held over the drop target for a period of time.
+   * This typically opens the item so that the user can drop within it.
+   */
   onDropActivate?: (e: DropActivateEvent) => void,
+  /** Handler that is called when a valid drag exits the drop target. */
   onDropExit?: (e: DropExitEvent) => void,
+  /** Handler that is called when a valid drag is dropped on the drop target. */
   onDrop?: (e: DropEvent) => void
 }
 
@@ -43,34 +53,86 @@ export function useDrop(options: DropOptions): DropResult {
   let state = useRef({
     x: 0,
     y: 0,
-    dragEnterCount: 0,
+    dragOverElements: new Set<Element>(),
     dropEffect: 'none' as DataTransfer['dropEffect'],
+    effectAllowed: 'none' as DataTransfer['effectAllowed'],
     dropActivateTimer: null
   }).current;
 
+  let fireDropEnter = (e: DragEvent) => {
+    setDropTarget(true);
+
+    if (typeof options.onDropEnter === 'function') {
+      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      options.onDropEnter({
+        type: 'dropenter',
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      });
+    }
+  };
+
+  let fireDropExit = (e: DragEvent) => {
+    setDropTarget(false);
+
+    if (typeof options.onDropExit === 'function') {
+      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      options.onDropExit({
+        type: 'dropexit',
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      });
+    }
+  };
+
   let onDragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (e.clientX === state.x && e.clientY === state.y) {
+    if (e.clientX === state.x && e.clientY === state.y && e.dataTransfer.effectAllowed === state.effectAllowed) {
       e.dataTransfer.dropEffect = state.dropEffect;
       return;
     }
 
     state.x = e.clientX;
     state.y = e.clientY;
 
+    let prevDropEffect = state.dropEffect;
+
+    // Update drop effect if allowed drop operations changed (e.g. user pressed modifier key).
+    if (e.dataTransfer.effectAllowed !== state.effectAllowed) {
+      let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
+      let dropOperation = allowedOperations[0];
+      if (typeof options.getDropOperation === 'function') {
+        let types = new DragTypes(e.dataTransfer);
+        dropOperation = getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
+      }
+
+      state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
+    }
+
     if (typeof options.getDropOperationForPoint === 'function') {
       let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      let dropOperation = options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y);
+      let dropOperation = getDropOperation(
+        e.dataTransfer.effectAllowed,
+        options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y)
+      );
       state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     }
 
+    state.effectAllowed = e.dataTransfer.effectAllowed;
     e.dataTransfer.dropEffect = state.dropEffect;
 
-    if (typeof options.onDropMove === 'function') {
+    // If the drop operation changes, update state and fire events appropriately.
+    if (state.dropEffect === 'none' && prevDropEffect !== 'none') {
+      fireDropExit(e);
+    } else if (state.dropEffect !== 'none' && prevDropEffect === 'none') {
+      fireDropEnter(e);
+    }
+
+    if (typeof options.onDropMove === 'function' && state.dropEffect !== 'none') {
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       options.onDropMove({
         type: 'dropmove',
@@ -95,8 +157,8 @@ export function useDrop(options: DropOptions): DropResult {
 
   let onDragEnter = (e: DragEvent) => {
     e.stopPropagation();
-    state.dragEnterCount++;
-    if (state.dragEnterCount > 1) {
+    state.dragOverElements.add(e.target as Element);
+    if (state.dragOverElements.size > 1) {
       return;
     }
 
@@ -105,52 +167,55 @@ export function useDrop(options: DropOptions): DropResult {
 
     if (typeof options.getDropOperation === 'function') {
       let types = new DragTypes(e.dataTransfer);
-      dropOperation = options.getDropOperation(types, allowedOperations);
-    }
-
-    if (dropOperation !== 'cancel') {
-      setDropTarget(true);
+      dropOperation = getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
     }
 
     if (typeof options.getDropOperationForPoint === 'function') {
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      dropOperation = options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y);
+      dropOperation = getDropOperation(
+        e.dataTransfer.effectAllowed,
+        options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y)
+      );
     }
 
+    state.x = e.clientX;
+    state.y = e.clientY;
+    state.effectAllowed = e.dataTransfer.effectAllowed;
     state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     e.dataTransfer.dropEffect = state.dropEffect;
 
-    if (typeof options.onDropEnter === 'function' && dropOperation !== 'cancel') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropEnter({
-        type: 'dropenter',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+    if (dropOperation !== 'cancel') {
+      fireDropEnter(e);
     }
-
-    state.x = e.clientX;
-    state.y = e.clientY;
   };
 
   let onDragLeave = (e: DragEvent) => {
     e.stopPropagation();
-    state.dragEnterCount--;
-    if (state.dragEnterCount > 0) {
+
+    // We would use e.relatedTarget to detect if the drag is still inside the drop target,
+    // but it is always null in WebKit. https://bugs.webkit.org/show_bug.cgi?id=66547
+    // Instead, we track all of the targets of dragenter events in a set, and remove them
+    // in dragleave. When the set becomes empty, we've left the drop target completely.
+    // We must also remove any elements that are no longer in the DOM, because dragleave
+    // events will never be fired for these. This can happen, for example, with drop
+    // indicators between items, which disappear when the drop target changes.
+
+    state.dragOverElements.delete(e.target as Element);
+    for (let element of state.dragOverElements) {
+      if (!e.currentTarget.contains(element)) {
+        state.dragOverElements.delete(element);
+      }
+    }
+
+    if (state.dragOverElements.size > 0) {
       return;
     }
 
-    if (typeof options.onDropExit === 'function' && state.dropEffect !== 'none') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropExit({
-        type: 'dropexit',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+    if (state.dropEffect !== 'none') {
+      fireDropExit(e);
     }
 
-    setDropTarget(false);
     clearTimeout(state.dropActivateTimer);
   };
 
@@ -180,17 +245,8 @@ export function useDrop(options: DropOptions): DropResult {
       }, 0);
     }
 
-    if (typeof options.onDropExit === 'function') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropExit({
-        type: 'dropexit',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
-    }
-
-    state.dragEnterCount = 0;
-    setDropTarget(false);
+    state.dragOverElements.clear();
+    fireDropExit(e);
     clearTimeout(state.dropActivateTimer);
   };
 
@@ -255,3 +311,9 @@ function effectAllowedToOperations(effectAllowed: string) {
 
   return allowedOperations;
 }
+
+function getDropOperation(effectAllowed: string, operation: DropOperation) {
+  let allowedOperationsBits = DROP_OPERATION_ALLOWED[effectAllowed];
+  let op = DROP_OPERATION[operation];
+  return allowedOperationsBits & op ? operation : 'cancel';
+}