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.
Just stumbled upon this too, in my case this was related to Dropzone
being wrapped in a label
. label
passes clicks to descendant input
s.
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 .
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"
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.