Fix missing file info when dragging native files (#3262)

* WIP Add a debugging case for hovering files

Temporarily, remove before merging.

* Load dataTransfer in every dragenter and dragover

Chrome (and apparently Safari too) will empty the `DataTransferItemList`
after a given drag event is done so we need to point `NativeDragSource`
to a new list on each dragenter/dragover event.

See https://bugs.chromium.org/p/chromium/issues/detail?id=137231

Fixes #584

* chore: cut semver

* fix: run prettier

Co-authored-by: Chris Trevino <chtrevin@microsoft.com>

.yarn/versions/dba13c30.yml

@@ -0,0 +1,7 @@
+releases:
+  react-dnd-examples: patch
+  react-dnd-html5-backend: patch
+  react-dnd-test-utils: patch
+
+declined:
+  - react-dnd-documentation

packages/backend-html5/src/HTML5BackendImpl.ts

@@ -205,7 +205,11 @@ export class HTML5BackendImpl implements Backend {
 			true,
 		)
 		target.addEventListener('dragover', this.handleTopDragOver as EventListener)
-		target.addEventListener('dragover', this.handleTopDragOverCapture, true)
+		target.addEventListener(
+			'dragover',
+			this.handleTopDragOverCapture as EventListener,
+			true,
+		)
 		target.addEventListener('drop', this.handleTopDrop as EventListener)
 		target.addEventListener(
 			'drop',
@@ -244,7 +248,11 @@ export class HTML5BackendImpl implements Backend {
 			'dragover',
 			this.handleTopDragOver as EventListener,
 		)
-		target.removeEventListener('dragover', this.handleTopDragOverCapture, true)
+		target.removeEventListener(
+			'dragover',
+			this.handleTopDragOverCapture as EventListener,
+			true,
+		)
 		target.removeEventListener('drop', this.handleTopDrop as EventListener)
 		target.removeEventListener(
 			'drop',
@@ -527,6 +535,10 @@ export class HTML5BackendImpl implements Backend {
 	public handleTopDragEnterCapture = (e: DragEvent): void => {
 		this.dragEnterTargetIds = []
 
+		if (this.isDraggingNativeItem()) {
+			this.currentNativeSource?.loadDataTransfer(e.dataTransfer)
+		}
+
 		const isFirstEnter = this.enterLeaveCounter.enter(e.target)
 		if (!isFirstEnter || this.monitor.isDragging()) {
 			return
@@ -578,8 +590,12 @@ export class HTML5BackendImpl implements Backend {
 		}
 	}
 
-	public handleTopDragOverCapture = (): void => {
+	public handleTopDragOverCapture = (e: DragEvent): void => {
 		this.dragOverTargetIds = []
+
+		if (this.isDraggingNativeItem()) {
+			this.currentNativeSource?.loadDataTransfer(e.dataTransfer)
+		}
 	}
 
 	public handleDragOver(e: DragEvent, targetId: string): void {

packages/examples/src/06-other/native-files/TargetBox.tsx

@@ -24,10 +24,24 @@ export const TargetBox: FC<TargetBoxProps> = (props) => {
 					onDrop(item)
 				}
 			},
-			collect: (monitor: DropTargetMonitor) => ({
-				isOver: monitor.isOver(),
-				canDrop: monitor.canDrop(),
-			}),
+			canDrop(item: any) {
+				console.log('canDrop', item.files[0], item.items[0])
+				return true
+			},
+			hover(item: any) {
+				console.log('hover', item.files[0], item.items[0])
+			},
+			collect: (monitor: DropTargetMonitor) => {
+				const item = monitor.getItem() as any
+				if (item) {
+					console.log('collect', item.files[0], item.items[0])
+				}
+
+				return {
+					isOver: monitor.isOver(),
+					canDrop: monitor.canDrop(),
+				}
+			},
 		}),
 		[props],
 	)