React-dropzone Opens Files Chooser Twice

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=1UmWtHbQ9U0LBHxYtZ1YS

Solution 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.

Solution 2:

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

Solution 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"
}