From 23cc13183904149191de50d852b61a1f6fcc6fd4 Mon Sep 17 00:00:00 2001 From: Hazantip Date: Thu, 8 Dec 2022 15:04:47 +0200 Subject: [PATCH] fix: hover/drop race conditions don't run hover animation frame after the drag has ended Description: It's a copy of PR: https://github.com/frontend-collective/react-sortable-tree/pull/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... --- src/utils/dnd-manager.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/utils/dnd-manager.js b/src/utils/dnd-manager.js index 6adb8dca..6a4bec86 100644 --- a/src/utils/dnd-manager.js +++ b/src/utils/dnd-manager.js @@ -235,9 +235,14 @@ export default class DndManager { // throttle `dragHover` work to available animation frames cancelAnimationFrame(this.rafId); this.rafId = requestAnimationFrame(() => { + const item = monitor.getItem(); + // skip if drag already ended before the animation frame + if (!item || !monitor.isOver()) { + return; + } this.dragHover({ node: draggedNode, - path: monitor.getItem().path, + path: item.path, minimumTreeIndex: dropTargetProps.listIndex, depth: targetDepth, });