Disable onClick

I don’t know if this is a bug or feature

I want to drag a file into a textarea and then it gets populated with the contents of the file (it is meant to be an XML). This works fine but when you click on anything in the dropzone it is then asking to upload a file. I feel it should be possible to disable the onClick feature. I have tried stopPropagation but this does not seem to exist.

I have a gif of my problem. When I drag the file into the drop zone it then console.logs the contents. When I proceed to click on the textarea it starts to prompt for me to open a file which is not the desired behavior. I would ideally like to be able to drag a new file to replace the old one, so I do not want to disable the dropzone. I also would not like to have a separate space for the dropzone.

Also as an accessibility note, not everyone can drag and drop hence you might be inclined to put in a button for people to click. If this is inside the dropzone it will prompt you twice to upload a file if you click the button, hence more incentive for this feature.

[mihaimartalogu]

In case anyone stumbles upon this after searching for how to disable opening the file dialog when clicked (but keep the dropzone active), the solution is to stop the event propagation in onClick. However, this needs to be done on the element that gets the root props, not on the Dropzone itself, i.e.:

<Dropzone
  ...
  // not here
>
  <div
    // but here:
    {...getRootProps({
      onClick: event => event.stopPropagation()
    })}
  >

[rolandjitsu]

@mihaimartalogu try https://github.com/react-dropzone/react-dropzone/pull/801 and let me know if your use case still works with the changes we made. You can still use event.stopPropagation(), but you can also just use useDropzone({noClick})/<Dropzone noClick>.

P.S. we don’t have a dependency on dropzone.js, this lib is a native react impl.