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.

Sign up for GitHub

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

Jump to bottom

Dropping file into child element of drop zone opens it #876

Closed
1 of 2 tasks
matthewreiter opened this issue Sep 13, 2019 · 2 comments · Fixed by xmartinezpujol/frontend-quiz#27 or mmintel/tinacms-fields#1 · May be fixed by xmartinezpujol/frontend-quiz#51 or ajesse11x/dremio-oss#4
Closed
1 of 2 tasks

Dropping file into child element of drop zone opens it #876

matthewreiter opened this issue Sep 13, 2019 · 2 comments · Fixed by xmartinezpujol/frontend-quiz#27 or mmintel/tinacms-fields#1 · May be fixed by xmartinezpujol/frontend-quiz#51 or ajesse11x/dremio-oss#4
Labels
released

Comments

@matthewreiter
Copy link
Contributor

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 using the accept option to limit the allowed file types and also rendering separate content within the drop zone based on whether isDragAccept or isDragReject are true, dragging a supported file onto a child element of the drop zone shows "move" instead of "copy" and dropping the file then opens it instead of the event getting handled by the drop zone.

If the current behavior is a bug, please provide the steps to reproduce.
https://codesandbox.io/embed/charming-microservice-7jyvw

Drag a supported file type (in this case .png) onto the text in the drop zone. The browser will then navigate to that file.

What is the expected behavior?
The dragged file should be handled by the drop zone.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.
This was tested on Firefox 69 and Chrome 76 on Windows 10 with react-dropzone 10.1.8.
@matthewreiter
Copy link
Contributor Author

matthewreiter commented Sep 13, 2019 •
edited
Loading

Troubleshooting that I have done indicates that draggedFiles returned by getFilesFromEvent(event) and then saved in the component state is getting partly cleared out by the browser when dragging a file from the drop zone to a child element of the drop zone.

The order of events is as follows:

  1. onDragEnterCb is fired when dragging over the child element. At this point draggedFiles has been cleared out.
  2. onDragEnterCb calls setDragTargets, which triggers a re-render with isDragAccept false and isDragReject true because of fileAccepted() returning false since there is no type information in draggedFiles.
  3. getFilesFromEvent(event) returns new dragged files, causing 'setDraggedFiles' to be dispatched, triggering a re-render with isDragAccept true and isDragReject false.
  4. Go back to step 1, which results in an infinite re-render loop.

matthewreiter pushed a commit to matthewreiter/react-dropzone that referenced this issue Sep 13, 2019
fix: store drag targets in a ref and close react-dropzone#876
0f0bb84 
This avoids unnecessary renders when drag targets change, which works around an issue where the drag targets get cleared out by the browser when dragging into a child element of the drop zone.
@matthewreiter matthewreiter mentioned this issue Sep 13, 2019
Merged
9 tasks
@okonet
Copy link
Collaborator

okonet commented Sep 18, 2019

🎉 This issue has been resolved in version 10.1.9 🎉

The release is available on:

Your semantic-release bot 📦🚀

@snyk-bot snyk-bot mentioned this issue Sep 26, 2019
Merged
@snyk-bot snyk-bot mentioned this issue Oct 15, 2019
Open
@snyk-bot snyk-bot mentioned this issue Oct 26, 2019
Open
@snyk-bot snyk-bot mentioned this issue Mar 31, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
2 participants
@okonet @matthewreiter