Fix intermittent problems with dropping a native file in FF (#713)

* Fix intermittent problems with dropping a native file in FF

Fixes #539

When dropping a native file in FF, under some conditions the `mousemove` event was firing when the file was dropped before the `drop` event fired. If the drop operation would fail.

To fix, the event handler is delayed so that the end drag will always run after the drop handler. This commit also switches to using the `mouseover` event so that the drag state is reset sooner if the original FF dragleave bug is hit, and the commit resets the `EnterLeaveCounter` when ending the drag operation via the `mouseover` event handler because the FF `dragleave` bug results in `this.entered` not being empty.

* Increase delay before ending the drag in FF

* Update outdated comment

* Switch to requestAnimationFrame to be more deterministic

packages/react-dnd-html5-backend/src/HTML5Backend.js

@@ -43,6 +43,7 @@ export default class HTML5Backend {
     this.handleSelectStart = this.handleSelectStart.bind(this);
     this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
     this.endDragNativeItem = this.endDragNativeItem.bind(this);
+    this.asyncEndDragNativeItem = this.asyncEndDragNativeItem.bind(this);
   }
 
   get window() {
@@ -74,6 +75,9 @@ export default class HTML5Backend {
     this.window.__isReactDndBackendSetUp = false; // eslint-disable-line no-underscore-dangle
     this.removeEventListeners(this.window);
     this.clearCurrentDragSourceNode();
+    if (this.asyncEndDragFrameId) {
+      this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
+    }
   }
 
   addEventListeners(target) {
@@ -197,10 +201,19 @@ export default class HTML5Backend {
     this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
     this.actions.beginDrag([this.currentNativeHandle]);
 
-    // On Firefox, if mousemove fires, the drag is over but browser failed to tell us.
+    // On Firefox, if mouseover fires, the drag is over but browser failed to tell us.
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=656164
     // This is not true for other browsers.
     if (isFirefox()) {
-      this.window.addEventListener('mousemove', this.endDragNativeItem, true);
+      this.window.addEventListener('mouseover', this.asyncEndDragNativeItem, true);
+    }
+  }
+
+  asyncEndDragNativeItem() {
+    this.asyncEndDragFrameId = this.window.requestAnimationFrame(this.endDragNativeItem);
+    if (isFirefox()) {
+      this.window.removeEventListener('mouseover', this.asyncEndDragNativeItem, true);
+      this.enterLeaveCounter.reset();
     }
   }
 
@@ -209,10 +222,6 @@ export default class HTML5Backend {
       return;
     }
 
-    if (isFirefox()) {
-      this.window.removeEventListener('mousemove', this.endDragNativeItem, true);
-    }
-
     this.actions.endDrag();
     this.registry.removeSource(this.currentNativeHandle);
     this.currentNativeHandle = null;