onDragLeave won't call back when react-dropzone has input element as children

If i create a dropzone with input element as children, the dragleave callback won’t be call correctly.

  <Dropzone disableClick multiple={false}>
       <div><input type='text' /></div>
  </Dropzone>

Here is the screenshot after drag in and dragout a while, the dragleave won’t callback anymore

[NervosaX]

This works around the issue by just not using the dropzone dragLeave, instead using a wrapper div.

@nqbao This might help you.

<div onDragLeave={this.handleDragLeave.bind(this)}>
    <Dropzone
        className={classes}
        style={{}}
        onDrop={this.handleDrop.bind(this)}
        onDragEnter={this.handleDragEnter.bind(this)}>

        {this.state.dropEnter ? (
            <div>Drop image here</div>
        ) : (
            <div>
                <Icon value="photo" />
                <div>Click to select an image or drag one here</div>
            </div>
        )}
    </Dropzone>
</div>

[romkri]

DragOver(e){
      if(this.dragTimer) clearTimeout(this.dragTimer);
      var me = this;
      this.dragTimer = setTimeout(function(){
          me.setState({drag:false});
      },100);

     e.preventDefault();
     this.setState({drag:true});
}