Edge freezes when a drop target returns null from render()

[dan]

Moved from react-dnd/react-dnd#390:

In MSEdge (and it seems ONLY in MSEdge; other IE versions, Firefox, Chrome, Safari, ... worked fine) the whole UI of our React application stopped responding. No error message, nothing, the page just went dead.

We implemented our DropHere component as such:

import { DropTarget } from 'react-dnd';

class DropHere {
  /* ... code shortened for brevity ... */
 render() {
   const { canDrop } = this.props;
   return canDrop ? <div>drop here</div> : false;
 }
}

export default DropTarget(types, spec, collect)(DropHere);

So that dropzone only appears while dragging. What fixed the problem with frozen UI was to always render the dropzone div and hide it with CSS when nothing is being dragged.

[Waseem Dahman]

I am having similar issue but a different cause. Clicks in MS Edge (v25.1) freeze after clicking on an element that looks like this:

class Item extends Component {
  // ...
  return compose(
    this.props.connectDragSource,
    this.props.connectDragPreview,
    this.props.connectDropTarget
  )(
    <div onClick={this.doSomething}>
      {/* stuff */}
    </div>
  )
}

That is a DropTarget, DragSource and DragPreview (An sortable list). After clicking an instance of that component it works (this.doSomething fires) for one time and then the whole app doesn't respond to clicks. Unless I click in a text input and blur out of that.