From df5386c6af04bef28697987ec4e338755eecf03e Mon Sep 17 00:00:00 2001
From: Juliusz Gonera <jgonera@gmail.com>
Date: Thu, 3 Feb 2022 15:21:54 -0800
Subject: [PATCH] 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 https://github.com/react-dnd/react-dnd/issues/584

* chore: cut semver

* fix: run prettier

Co-authored-by: Chris Trevino <chtrevin@microsoft.com>
---
 .yarn/versions/dba13c30.yml                   |  7 ++++++
 .../backend-html5/src/HTML5BackendImpl.ts     | 22 ++++++++++++++++---
 .../src/06-other/native-files/TargetBox.tsx   | 22 +++++++++++++++----
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 .yarn/versions/dba13c30.yml

diff --git a/.yarn/versions/dba13c30.yml b/.yarn/versions/dba13c30.yml
new file mode 100644
index 0000000000..3379c82ab6
--- /dev/null
+++ b/.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
diff --git a/packages/backend-html5/src/HTML5BackendImpl.ts b/packages/backend-html5/src/HTML5BackendImpl.ts
index d0b757054f..50c6cdab80 100644
--- a/packages/backend-html5/src/HTML5BackendImpl.ts
+++ b/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 {
diff --git a/packages/examples/src/06-other/native-files/TargetBox.tsx b/packages/examples/src/06-other/native-files/TargetBox.tsx
index e99e2eb2b9..a7fcbac119 100644
--- a/packages/examples/src/06-other/native-files/TargetBox.tsx
+++ b/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],
 	)