Regression: Unable to click DOM elements inside drop zone with recommended code

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?

The removal of disableClick in https://github.com/react-dropzone/react-dropzone/pull/767 has caused a regression. You are now unable to click on buttons inside a dropzone when performing the recommended alternative because propagation is stopped entirely:

{onClick: evt => evt.preventDefault()} // stops all propagtion

disableClick skipped the dropzone element, but continued propagation.

The following replacement stops all propagation and is functionally different:

return (
      <Dropzone
        accept={accept}
        onDrop={this.onDrop.bind(this)}
      >
        {({getRootProps, getInputProps, isDragActive}) => (
            <div {...getRootProps({onClick: evt => evt.preventDefault()})} style={{position: "relative"}}>
              <input {...getInputProps()} />

https://github.com/react-dropzone/react-dropzone/pull/767/files#diff-0b1f9c3babb635d33ee2724a6f8d78b9

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

The Fullscreen example that would reproduce this has been removed in commit https://github.com/react-dropzone/react-dropzone/commit/5398f44f8fdcab8429b0c7769161bba72dad2800#diff-0b1f9c3babb635d33ee2724a6f8d78b9. (Why?)

1. Create a button inside the fullscreen dropzone
2. Disable click on dropzone by following the recommendation
3. Unable to click button.

Or just add a button inside https://github.com/rolandjitsu/react-dropzone/blob/c31e06e93a96162e4c23cd1167270ac61a1bddf5/examples/Fullscreen/Readme.md

What is the expected behavior?

I am able to click the button inside the dropzone.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

1. Broken in v9 and v10, as a result of https://github.com/react-dropzone/react-dropzone/pull/767.
2. This can be seen because the old logic would continue propagating the click without invoking the file dialog:

if (!disableClick && !isDefaultPrevented(evt)) { // I can disable click but still continue propagation
      evt.stopPropagation()

1. Would love to see the return of a full screen dropzone example.
2. Let’s bring back disableClick, it is functionally different to the current approach.

Thanks for all the cleanup and work!

[damianobarbati]

@localjo honestly I’m not understanding. Does the following work for you?

<div {...getRootProps({ onClick: e => e.stopPropagation() })}>
            <input {...getInputProps()} />

Because it totally stops the dialog from opening to me.

[localjo]

Hmm… now it’s working. I must have had my wires crossed somewhere. I’ve been struggling with this all morning. Sorry for the confusion.