Fix flickering of node in overlay with React concurrent mode (#305)

clauderic · May 29, 2021 · d289274 · d289274
1 parent ae398de
commit d289274
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/.changeset/two-terms-mate.md b/.changeset/two-terms-mate.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/core': patch
+---
+
+Hide the node in the overlay after the drop animation is finished. This prevents some flickering with React concurrent mode.
diff --git a/packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts b/packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts
@@ -95,6 +95,8 @@ export function useDropAnimation({
             );
 
             nodeAnimation.onfinish = () => {
+              node.style.display = 'none';
+
               setDropAnimationComplete(true);
 
               if (finalNode && dragSourceOpacity != null) {