React-dropzone: onDrop not trigger if component is inside modal

[soumyart]

Current behaviour
Place the react-dropzone inside a modal component. Open the modal and select a file not triggering onDrop call back.

Steps : https://codesandbox.io/s/3v1r9mm5pm

Expected behaviour
onDrop should be called.

[soumyart]

After setting noDragEventsBubbling: true it worked. Seems like the modal framework is doing something with those event and stopping the propagation.

https://github.com/react-dropzone/react-dropzone/blob/master/src/index.js#L597

It would be nice to mention it in the docs if parent called the preventDefault(), then onDrop might not be triggered.

[rolandjitsu]

@soumyart the callback invocation is stopped when the event propagation is stopped. This behaves as expected, as explained here.

The fact that noDragEventsBubbling works it's pure coincidence, as it's purpose was to prevent outer dropzones from picking up on drag events in a scenario where you have nested dropzones.

preventDefault() doesn't impact the drag callbacks though.

I think the modal libraries should be responsible for documenting the fact that event propagation will be stopped as the behavior you experience with the dropzone is a symptom of that, not the cause.

See https://github.com/react-dropzone/react-dropzone/issues/799 as well and follow the issue reported on fabric's side.

[soumyart]

@rolandjitsu you are right. Silly me fabric document was not clear.