diff --git a/packages/react-dnd-html5-backend/src/HTML5Backend.js b/packages/react-dnd-html5-backend/src/HTML5Backend.js index 0a51e3c19c..ace97c3232 100644 --- a/packages/react-dnd-html5-backend/src/HTML5Backend.js +++ b/packages/react-dnd-html5-backend/src/HTML5Backend.js @@ -36,7 +36,7 @@ export default class HTML5Backend { this.currentDragSourceNodeOffset = null this.currentDragSourceNodeOffsetChanged = false this.altKeyPressed = false - this.mouseMoveTimeoutId = null + this.mouseMoveTimeoutTimer = null this.getSourceClientOffset = this.getSourceClientOffset.bind(this) this.handleTopDragStart = this.handleTopDragStart.bind(this) @@ -276,25 +276,32 @@ export default class HTML5Backend { this.currentDragSourceNodeOffset = getNodeClientOffset(node) this.currentDragSourceNodeOffsetChanged = false + // A timeout of > 0 is necessary to resolve Firefox issue referenced + // See: + // * https://github.com/react-dnd/react-dnd/pull/928 + // * https://github.com/react-dnd/react-dnd/issues/869 + const MOUSE_MOVE_TIMEOUT = 1000 + // Receiving a mouse event in the middle of a dragging operation // means it has ended and the drag source node disappeared from DOM, // so the browser didn't dispatch the dragend event. // - // We need to wait an execution frame before we start listening for mousemove events. + // We need to wait before we start listening for mousemove events. // This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event // immediately in some browsers. - this.mouseMoveTimeoutId = setTimeout( - _ => { - _.mouseMoveTimeoutId = null - return _.window.addEventListener( - 'mousemove', - _.endDragIfSourceWasRemovedFromDOM, - true, - ) - }, - 1000, - this, - ) + // + // See: + // * https://github.com/react-dnd/react-dnd/pull/928 + // * https://github.com/react-dnd/react-dnd/issues/869 + // + this.mouseMoveTimeoutTimer = setTimeout(() => { + this.mouseMoveTimeoutId = null + return this.window.addEventListener( + 'mousemove', + this.endDragIfSourceWasRemovedFromDOM, + true, + ) + }, MOUSE_MOVE_TIMEOUT) } clearCurrentDragSourceNode() { @@ -302,13 +309,13 @@ export default class HTML5Backend { this.currentDragSourceNode = null this.currentDragSourceNodeOffset = null this.currentDragSourceNodeOffsetChanged = false - this.window.clearTimeout(this.mouseMoveTimeoutId) + this.window.clearTimeout(this.mouseMoveTimeoutTimer) this.window.removeEventListener( 'mousemove', this.endDragIfSourceWasRemovedFromDOM, true, ) - this.mouseMoveTimeoutId = null + this.mouseMoveTimeoutTimer = null return true } diff --git a/packages/react-dnd/src/decorateHandler.js b/packages/react-dnd/src/decorateHandler.js index ff82cd8001..959a1c4fb5 100644 --- a/packages/react-dnd/src/decorateHandler.js +++ b/packages/react-dnd/src/decorateHandler.js @@ -173,11 +173,15 @@ export default function decorateHandler({ } render() { - return React.createElement(DecoratedComponent, { - ...this.props, - ...this.state, - ref: isClassComponent(DecoratedComponent) ? this.handleChildRef : null, - }) + return ( + + ) } }