Document that using <input> inside a <label> triggers a 2nd click event

[CWSites]

It seems that this issue has been re-introduced. I am still getting this error in Chrome from version 10.2 up to the latest version. Reproduction: https://codesandbox.io/s/pedantic-leakey-61oo3?file=/src/App.js

If you click on label and close the dialog either by choosing a file or canceling, another file select dialog is open.

On closer inspection, this issue is solved by passing noClick: true to the useDropzone hook. Maybe this behaviour should be enabled by default when the root element is a label element?

Originally posted by @Stopa in #182 (comment)

[rolandjitsu]

@CWSites I'd appreciate it if you follow the issue template to describe what the issue is.

[rolandjitsu]

The issue with using a <label> is a known issue (it should be common knowledge to the average frontend dev - clicking a label triggers click on the <input> if it's nested under - see SO). I attempted a fix in #817, but that introduced other issues, so it got reverted in a159354.

I can add a note about this where the documentation already mentions using noClick to prevent such behaviour.

[github-actions]

🎉 This issue has been resolved in version 11.6.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[KutnerUri]

weird, I'm getting the opposite effect when I have an input inside a label.

• In windows, I get a double dialog on click.
• In Mac (chrome), I only get one dialog on click.
  • When I turn on noClick, the dialog doesn't open at all.
• In mobile (safari), the dialog opens but doesn't select the file.

I'm changing the root element from <label> to <div>, it seems to solve it, I will confirm later.
I think it's better practice to use <label>? but probably not critical here.

UPDATE:
I can confirm, switching to div solved it, and also other mobile issues I had