<Dropzone> cause onClick to fire twice on parent <div>

I ran into an issue with click handlers and drag handlers being fired twice on a <div>, and found that it happens when I have <Dropzone> as a child of the <div>.

Before <Dropzone>:

<div onClick={e => console.log("click", e)}>
</div>

Clicking the <div> results in:

After <Dropzone>:

<div onClick={e => console.log("click", e)}>
  <Dropzone className="upload-drop-area"
            activeClassName="upload-drop-area-accept"
            rejectClassName="upload-drop-area-reject"
            multiple={false}
            onDragEnter={this.onDragEnter}
            onDragLeave={this.onDragLeave}
            onDropAccepted={this.onDropAccepted}>
  </Dropzone>
</div>

Clicking the <div> results in two events:

I’ve never seen this kind of thing in React before. Any idea what’s going on?

[LaustAxelsen]

Just add a pointer-events: none; css-rule on the dropzone DIV dom-node… that fixed it for me.

[mweibel]

Maybe a few more pointers: I experienced the same issue as here but it only seems to happen in Chrome. Firefox handles it correctly (IMO). Code to paste on https://react-dropzone.js.org:

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps, open} = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.name}>
      {file.name} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
        <button onClick={open}>Browse Files</button>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />

Reproducing:

1. click on the dropzone: all works well. File dialog only opens once
2. click on browse files button: FF: all works well. Chrome: file dialog opens twice, and only the second one actually uploads the file

Using e.preventDefault() doesn’t help:

<button onClick={(e) => { e.preventDefault(); open(e)}>Browse Files</button>

only removing the onClick handler seems to help and all still works.