Error when dropping on a target not created with useDrop (#2900)

Author: devongovett

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

@@ -101,6 +101,16 @@ function endDragging() {
   }
 }
 
+export function isValidDropTarget(element: Element): boolean {
+  for (let target of dropTargets.keys()) {
+    if (target.contains(element)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 const CANCELED_EVENTS = [
   'pointerdown',
   'pointermove',
@@ -285,6 +295,11 @@ class DragSession {
   }
 
   cancelEvent(e: Event) {
+    // Allow focusin and focusout on the drag target so focus ring works properly.
+    if ((e.type === 'focusin' || e.type === 'focusout') && e.target === this.dragTarget?.element) {
+      return;
+    }
+
     // Allow default for events that might cancel a click event
     if (!CLICK_EVENTS.includes(e.type)) {
       e.preventDefault();
@@ -440,6 +455,12 @@ class DragSession {
       });
     }
 
+    // Blur and re-focus the drop target so that the focus ring appears.
+    if (this.currentDropTarget) {
+      this.currentDropTarget.element.blur();
+      this.currentDropTarget.element.focus();
+    }
+
     this.setCurrentDropTarget(null);
     endDragging();
   }

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

@@ -18,7 +18,7 @@ import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './c
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import ReactDOM from 'react-dom';
-import {useDescription} from '@react-aria/utils';
+import {useDescription, useGlobalListeners} from '@react-aria/utils';
 import {useDragModality} from './utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {writeToDataTransfer} from './utils';
@@ -62,6 +62,7 @@ export function useDrag(options: DragOptions): DragResult {
   }).current;
   state.options = options;
   let [isDragging, setDragging] = useState(false);
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
   let onDragStart = (e: DragEvent) => {
     let items = options.getItems();
@@ -114,6 +115,15 @@ export function useDrag(options: DragOptions): DragResult {
       }
     }
 
+    // Enforce that drops are handled by useDrop.
+    addGlobalListener(window, 'drop', e => {
+      if (!DragManager.isValidDropTarget(e.target as Element)) {
+        e.preventDefault();
+        e.stopPropagation();
+        throw new Error('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');
+      }
+    }, {capture: true, once: true});
+
     if (typeof options.onDragStart === 'function') {
       options.onDragStart({
         type: 'dragstart',
@@ -160,6 +170,7 @@ export function useDrag(options: DragOptions): DragResult {
     }
 
     setDragging(false);
+    removeAllGlobalListeners();
   };
 
   let onPress = (e: PressEvent) => {

packages/@react-aria/dnd/stories/dnd.stories.tsx

@@ -409,11 +409,13 @@ function DraggableCollectionItem({item, state, dragState, onCut}) {
   let cellNode = [...item.childNodes][0];
   let isSelected = state.selectionManager.isSelected(item.key);
 
-  let {rowProps} = useGridRow({node: item}, state, rowRef);
+  let {rowProps} = useGridRow({
+    node: item,
+    shouldSelectOnPressUp: true
+  }, state, rowRef);
   let {gridCellProps} = useGridCell({
     node: cellNode,
-    focusMode: 'cell',
-    shouldSelectOnPressUp: true
+    focusMode: 'cell'
   }, state, cellRef);
 
   let {dragProps, dragButtonProps} = useDraggableItem({key: item.key}, dragState);
@@ -431,10 +433,10 @@ function DraggableCollectionItem({item, state, dragState, onCut}) {
   let id = useId();
 
   return (
-    <div {...rowProps} ref={rowRef} aria-labelledby={id}>
+    <div {...mergeProps(rowProps, dragProps)} ref={rowRef} aria-labelledby={id}>
       <FocusRing focusRingClass={classNames(dndStyles, 'focus-ring')}>
         <div
-          {...mergeProps(gridCellProps, dragProps, clipboardProps)}
+          {...mergeProps(gridCellProps, clipboardProps)}
           aria-labelledby={id}
           ref={cellRef}
           className={classNames(dndStyles, 'draggable', {