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

fix: hover/drop race conditions #936

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Hazantip
Copy link

@Hazantip Hazantip commented Dec 8, 2022

don't run hover animation frame after the drag has ended

Description:

It's a copy of PR: #841

I think I've found two race conditions where dragging nodes too quickly results in errors.

Case 1: Uncaught TypeError: Cannot read property 'path' of null at dnd-manager.js:240

How to reproduce:

Open the "Minimal implementation" storybook in Chrome (I have reproduced this in Firefox, too, but it's a lot trickier) Enable 6x slowdown CPU throttling from DevTools
Drag-and-drop the nodes around, trying to keep each drag as quick as possible Eventually you'll get error (in DevTools console) "Uncaught TypeError: Cannot read property 'path' of null at dnd-manager.js:240" Apparently what happens is that the animation frame code gets called after the drag is already over, and monitor.getItem() returns null.

Case 2: Encountered two children with the same key warning from React

How to reproduce:

Open the "Callbacks" storybook (important: it has getNodeKey which uses ids) with Chrome Enable 6x slowdown CPU throttling from DevTools
Drag-and-drop the nodes around, trying to keep each drag as quick as possible Eventually you'll get Warning: Encountered two children with the same key, 'nodeA'. from React It looks like drop has been called (so the dragged node has been added back to tree), but after the same animation frame code runs, "draggedNode" is set to the already-dropped node... which is then rendered again, and for a short duration (not visible), there are two nodes with same key in the tree...

don't run hover animation frame after the drag has ended

Description: 

It's a copy of PR: frontend-collective#841

I think I've found two race conditions where dragging nodes too quickly results in errors.

Case 1: Uncaught TypeError: Cannot read property 'path' of null at dnd-manager.js:240

How to reproduce:

Open the "Minimal implementation" storybook in Chrome (I have reproduced this in Firefox, too, but it's a lot trickier)
Enable 6x slowdown CPU throttling from DevTools
Drag-and-drop the nodes around, trying to keep each drag as quick as possible
Eventually you'll get error (in DevTools console) "Uncaught TypeError: Cannot read property 'path' of null at dnd-manager.js:240"
Apparently what happens is that the animation frame code gets called after the drag is already over, and monitor.getItem() returns null.

Case 2: Encountered two children with the same key warning from React

How to reproduce:

Open the "Callbacks" storybook (important: it has getNodeKey which uses ids) with Chrome
Enable 6x slowdown CPU throttling from DevTools
Drag-and-drop the nodes around, trying to keep each drag as quick as possible
Eventually you'll get Warning: Encountered two children with the same key, 'nodeA'. from React
It looks like drop has been called (so the dragged node has been added back to tree), but after the same animation frame code runs, "draggedNode" is set to the already-dropped node... which is then rendered again, and for a short duration (not visible), there are two nodes with same key in the tree...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant