react-dropzone opens files chooser twice

Question

I an encountering an issue with react-dropzone for quite a long time.

First, let's jump straight to the problem with a video: https://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os

The file choser window opens twice on every file inputs of my website, it is not an infinite loop, just twice.

Here is the code I use for this dropzone:

                    <Dropzone onDrop={this.onDrop.bind(this)}
                              key={this.state.key}
                              style={{border: "none"}}>
                        <div className="input-file">
                            <label for="file">
                                <button type="button">Choisissez un fichier</button>
                            </label>
                        </div>
                        <div className={"file-name " + (!this.state.selectedOption ? '' : 'hidden')}>
                            Aucun fichier choisi
                        </div>
                        <div className={"file-name " + (this.state.selectedOption ? '' : 'hidden')}>
                            {this.state.selectedOption}
                        </div>
                    </Dropzone>

The unwanted event happens every time I drop or even when I click on the input itself

If hope to give you guys enough information, if you need more I will more than happy to share code.

Answer 1

Just stumbled upon this too, in my case this was related to Dropzone being wrapped in a label. label passes clicks to descendant inputs.

As a workaround, you can remove the parent label (or change it to div or whatever).

Or, although I do not recommend it, monkey-patch Dropzone.prototype.onInputElementClick (or subclass and override). No further instructions here, as to not facilitate people shooting their feet.

Related react-dropzone issue: https://github.com/react-dropzone/react-dropzone/issues/182.

Answer 2

Faced the same issue, later found a way to solve it. Just add stopPropagation to parent div onClick.

Answer 3

This issue has been resolved in react-dropzone version 10.1.3.

I had the problem with version 10.1.0. Once I upgraded it to v10.1.3 in package.json, the problem is gone.

"dependencies": {
  "react-dropzone": "^10.1.3"
}