React dropzone - dragLeave event fired when dragging file over dropzone

I am using React dropzone for file upload

<DropZone
            accept='.pdf,.pptx,.ppt,.docx,.doc,.xls,.xlsx,.xslx,.png,.xsl,.jpg,.jpeg,.gif,.zip'
            onDrop={ files => {
              this.handleFileDrop(files);
              this.dragLeaveHandler();
            } }
            onDragEnter={ this.dragOverHandler }
            onDragLeave={ this.dragLeaveHandler }
            multiple={ false }
            style={ { height: '100%' } }
          >

  dragOverHandler = () => {
    console.log('enter');
    this.setState({
      isDragOver: true,
    });
  };

  dragLeaveHandler = () => {
    console.log('exit');
    this.setState({
      isDragOver: false,
    });
  };

When a file is moving above the drop zone onDragLeave event fires simultaneously.

Should I use some other events? How can I fix this issue?

The problem you're facing is most likely caused by the DOM events dragEnter and dragLeave getting messed up instead of any flaw in the react-dropzone package. Some elements may cause hovering over them in certain positions not to register as hovering over their parent element. For example, there is a thin sliver at the top edge of any plain string rendered inside a block displayed element. Most commonly this happens inside a <p> tag.

Without seeing the children rendered inside your dropzone, it is impossible to give a specific fix. Generally, you will have to mess with the styling of the children, though. <p> tags for example will not be a problem if their size is set to 0 pixels or if they're replaced with <span> tags. Both options will disrupt the displaying of the children, which is unfortunatley unavoidable.

As for using other events, you're out of luck. The DropZone component relies on the onDragEnter and onDragLeave HTML DOM events. Therefore any fix you might come up with won't fix the component itself.

All in all, it's an unfortunate issue that just has to be dealt with. The simplest way to deal with it is to just have at most one piece of text inside the dropzone and to set its size to 0 pixels with css: height: 0px;. Regular <div> elements won't cause issues, so you can craft an intricate dropzone using them.