title: React onDrop not firing only onDragOver and onDragLeave
body: <p>I'm trying to implement a drag and drop of files with React. I've got it from a tutorial and when clicking on the dropzone and adding files it works fine. It doesn't work when dragging the files over the dropzone. </p>
  
  <p>I've added some console.logs to see what code is executed. It seems that only the onDragOver and onDragLeave seem to fire. The onDrop function never gets fires.</p>
  
  <p>I also switch using the <code>react-dropzone</code> library but this got exactly the same result: onDrop was not firing.</p>
  
  <p>I've tested with the latest version of Google Chrome and FireFox and both are not working.</p>
  
  <pre><code>import * as React from 'react'
  const cloudIcon = require('../../../../images/cloud-computing.svg');
  
  
  interface dropZoneProps {
    onFilesAdded: (event: any, array: any) =&gt; void
  }
  
  interface dropZoneState {
    highlight: boolean
  }
  
  
  export class DropzoneElem extends React.Component&lt;dropZoneProps, dropZoneState&gt; {
    constructor(props: dropZoneProps) {
      super(props);
      this.state = {
        highlight: false
      }
    }
  
    private fileInputRef = React.createRef&lt;HTMLInputElement&gt;()
  
    openFileDialog(event: React.MouseEvent&lt;HTMLDivElement&gt;) {
      this.fileInputRef.current.click();
    }
  
    handleFileInputChange(event: React.ChangeEvent&lt;HTMLInputElement&gt;) {
      const files = event.target.files;
      const array = this.fileListToArray(files);
      this.props.onFilesAdded(event, array)
    }
  
    fileListToArray(list: FileList) {
      const array = [];
      for (var i = 0; i &lt; list.length; i++) {
        array.push(list.item(i))
      }
      return array;
    }
  
    onDragOver(event: React.DragEvent&lt;HTMLDivElement&gt;) {
      event.preventDefault();
      console.log('hit-1')
      this.setState({ highlight: true });
    }
  
    onDragLeave(event: React.DragEvent&lt;HTMLDivElement&gt;) {
      event.preventDefault();
      console.log('hit-2')
      this.setState({ highlight: false });
    }
  
    handleOnDrop(event: React.DragEvent&lt;HTMLDivElement&gt;) {
      event.preventDefault();
      console.log('hit-3')
  
      const files = event.dataTransfer.files;
      const array = Array.from(files).map(file =&gt; { return file })
  
      this.props.onFilesAdded(event, array);
      this.setState({ highlight: false });
    }   
  
    render() {
      const dragClass = this.state.highlight ? 'dropzone highlight' : 'dropzone';
  
      return (
        &lt;React.Fragment&gt;
          &lt;div className={dragClass} 
               onClick={event =&gt; this.openFileDialog(event)}
               style={{ cursor : 'pointer' }}
               onDragOver={event =&gt; this.onDragOver(event)}  
               onDragLeave={event =&gt; this.onDragLeave(event)}
               onDrop={event =&gt; this.handleOnDrop(event)} &gt;
            &lt;img src={cloudIcon} className='dropzone-icon' /&gt;
            &lt;input ref={this.fileInputRef}
                   className='file-input'
                   type='file'
                   multiple
                   onChange={event =&gt; this.handleFileInputChange(event)}
            /&gt;
            &lt;span&gt;Upload Files&lt;/span&gt;
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      )
    }
  }
  </code></pre>