fix: hover/drop race conditions #1
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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...