Skip to content

Commit

Permalink
Load dataTransfer in every dragenter and dragover
Browse files Browse the repository at this point in the history
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 react-dnd#584
  • Loading branch information
jgonera committed Jul 18, 2021
1 parent e3e1e0c commit 9886e62
Showing 1 changed file with 11 additions and 3 deletions.
14 changes: 11 additions & 3 deletions packages/backend-html5/src/HTML5BackendImpl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ 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',
Expand Down Expand Up @@ -241,7 +241,7 @@ 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',
Expand Down Expand Up @@ -528,6 +528,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
Expand Down Expand Up @@ -579,8 +583,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 {
Expand Down

0 comments on commit 9886e62

Please sign in to comment.