Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swallowing click events of DOM elements #826

Closed
troutowicz opened this issue Apr 24, 2019 · 14 comments · May be fixed by ajesse11x/dremio-oss#4
Closed

Swallowing click events of DOM elements #826

troutowicz opened this issue Apr 24, 2019 · 14 comments · May be fixed by ajesse11x/dremio-oss#4
Labels

Comments

@troutowicz
Copy link

@troutowicz troutowicz commented Apr 24, 2019

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?

Click events from anchor element children are swallowed when disabling dropzone click.

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

https://codesandbox.io/s/o5112715xq

What is the expected behavior?

Click events of DOM children should propagate.

If this is a feature request, what is motivation or use case for changing the behavior?

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

  • Introduced in v9.0.0
  • Fixed in v10.1.0
  • Regressed in v10.1.3

Previous issue: #783

@rolandjitsu

This comment has been minimized.

Copy link
Collaborator

@rolandjitsu rolandjitsu commented Apr 25, 2019

Most likely because of ea5fb32#diff-1fdf421c05c1140f6d71444ea2b27638R461. I'll see how to fix it without breaking the feature.

@hubgit

This comment has been minimized.

Copy link

@hubgit hubgit commented May 1, 2019

I think this might be the same issue I was about to report, where a details element inside a dropzone doesn't expand when clicked: https://codesandbox.io/embed/q8221nzkz4

@rolandjitsu

This comment has been minimized.

Copy link
Collaborator

@rolandjitsu rolandjitsu commented May 2, 2019

@hubgit it definitely is. I think the only solution for now will be to remove the event.preventDefault() and document how to stop click on <label> elements triggering dialog open. I hope this weekend I will have a bit of time to fix this.

@koprivajakub

This comment has been minimized.

Copy link

@koprivajakub koprivajakub commented May 17, 2019

I have the same issue. I am rendering a chat window where user can drag and drop images on the entire chat window.

So my settings is:

<Dropzone noClick={true} {...otherProps}>

Currently I have to bypass this by having a preventDefault on the DropzoneState

<Dropzone
  multiple={false}
  onDropRejected={this.onFileDropRejected}
  ref={this.dropZoneRef}
  onDropAccepted={this.onFileDropAccepted}
  accept={["image/jpeg", "image/gif", "image/bmp", "image/png"]}
  noKeyboard={true}
  // noClick={true}
  maxSize={this.MAX_FILE_SIZE_BYTES}
 >
    {(dropzoneState: DropzoneState) => {
      return (
        <div
          {...dropzoneState.getRootProps({
            className: "chat-content-wrapper",
            onClick: e => e.stopPropagation()
          })}
       >
@vieira

This comment has been minimized.

Copy link

@vieira vieira commented May 21, 2019

Hello @rolandjitsu, since upgrading from 10.1.2 to 10.1.3 I am also experiencing an issue that I suppose is related to this issue. We have a <input type="file" /> inside a <Dropzone onClick={evt => evt.preventDefault()} ...> that is not opening the file dialog anymore.

@riccardo-forina riccardo-forina mentioned this issue Jun 11, 2019
3 of 3 tasks complete
@ivasilov-h4

This comment has been minimized.

Copy link

@ivasilov-h4 ivasilov-h4 commented Jun 28, 2019

Seems like only way around this bug is downgrading react-dropzone to 10.1.2. Any progress on this bug?

@rolandjitsu

This comment has been minimized.

Copy link
Collaborator

@rolandjitsu rolandjitsu commented Jul 2, 2019

Sorry folks, I've been pretty busy lately. The fix is pretty straightforward, just need a few minutes to do it. Unless someone else wants to make a quick PR, I might have some time this upcoming weekend.

@LeopoldLerch

This comment has been minimized.

Copy link

@LeopoldLerch LeopoldLerch commented Jul 18, 2019

Same issue here. I would try to do it with a PR, but i guess, it will be easier for you to do it yourself, than explaining me where to fix and how. At least if it is really that simple

@LeopoldLerch

This comment has been minimized.

Copy link

@LeopoldLerch LeopoldLerch commented Jul 18, 2019

Okay, found it, but i think I cannot simply delete the event.preventDefalt(). And I don´t really know the purpose it was inserted before as I don´t really understand the comment´s use case. However currently it is preventing all onclick events inside it, not only the one mentioned in the comment´s use case.

@rolandjitsu

This comment has been minimized.

Copy link
Collaborator

@rolandjitsu rolandjitsu commented Jul 21, 2019

@LeopoldLerch it was already mentioned in #826 (comment).

rolandjitsu added a commit to rolandjitsu/react-dropzone that referenced this issue Jul 21, 2019
@okonet

This comment has been minimized.

Copy link
Collaborator

@okonet okonet commented Jul 21, 2019

🎉 This issue has been resolved in version 10.1.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

@okonet okonet added the released label Jul 21, 2019
@liwire

This comment has been minimized.

Copy link

@liwire liwire commented Jul 31, 2019

I'm seeing this on 10.1.7 again. But not 10.1.5. Weird.

@atmortensen

This comment has been minimized.

Copy link

@atmortensen atmortensen commented Aug 9, 2019

I'm also seeing this on 10.1.7

@143mailliw

This comment has been minimized.

Copy link

@143mailliw 143mailliw commented Oct 28, 2019

Still seeing this issue. (10.1.10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.