react-dropzone: Don't open file dialog when default prevented earlier.

Do you want to request a feature or report a bug?

I found a bug
~~I want to propose a feature~~

What is the current behavior? When clicking a button inside a dropzone that “prevented the default behavior”, the dropzone still handles the click.

If the current behavior is a bug, please provide the steps to reproduce.

Create a ReactDropzone, with a button inside. For example, to delete a dropped file (DeleteFileButton)
Make sure the onClick handler of DeleteFileButton calls event.preventDefault().
Click this DeleteFileButton
The Open File Dialog is shown.

What is the expected behavior? When calling event.preventDefault() inside the onClick handler of the DeleteFileButton, the onClick handler of ReactDropzone shouldn’t do anything. This can be achieved by:

onClick(evt) {
  if (evt.isDefaultPrevented()) {
    return;
  }

  // rest of onClick handler.
}

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (2 by maintainers)

Commits related to this issue

fix: improve onClick and disableClick props (fixes #530) (#694) - Let onClick callback on container propagate when `{disableClick }` is true - Do not open file dialog if `.preventDefault()` was call... — committed to react-dropzone/react-dropzone by ibc 6 years ago

Most upvoted comments

This bot is frustrating.

smeijer on Sep 17, 2018

@stalebot, the issue still needs to be resolved.

smeijer on Mar 19, 2018

But event.stopPropagation is really dirty. You should never have to call stopPropagation. Because this prevents other things. Like click away a modal, close dropdown menu’s, catch scroll events. Click on the DeleteFileButton (example above) should close the dropdown menu in a navigation bar. When the button isn’t propagating it’s click, the dropdown will never receive the event, and thereby never close.

stopPropagation is simply saying “stop all the things you’re doing, just do this, and only this”. While preventDefault is more asking to not run the default behavior. Yes, it’s more work, because you should check on some places if the default behavior is being prevented. But that’s exactly the point.

There is no opt-out when you stopPropagation, you’re effectively killing other event handlers.

If I didn’t make my point; Please, don’t use stopPropagation, ever.

smeijer on Jan 18, 2018

🎉 This issue has been resolved in version 6.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

okonet on Oct 13, 2018

@stalebot, the issue still needs to be resolved.

smeijer on Jul 18, 2018

@stalebot, the issue still needs to be resolved.

smeijer on May 19, 2018