Ensure layouts recomputed correctly in relation to other effects.

Without this, issues could occur where collisions were detected against
stale positions and items moved incorrectly as a result. In addition,
layouts might not have been recomputed correctly on drag end if
adjustments were made by custom `onDragEnd` handlers. Now,
core behaviour such as `recomputeLayouts` and `detectCollisions` is
called explicitly as part of `dragStart` and `dragEnd` to ensure correct
ordering.

For #55

Author: martinpengellyphillips

CHANGELOG.md

@@ -4,6 +4,14 @@
 
 ### Fixed
 
+- Ensure layouts recomputed before other effects on drag start. Without this,
+  issues could occur where collisions were detected against stale positions and
+  items moved incorrectly as a result. In addition, layouts might not have been
+  recomputed correctly on drag end if adjustments were made by custom
+  `onDragEnd` handlers. Now, core behaviour such as `recomputeLayouts` and
+  `detectCollisions` is called explicitly as part of `dragStart` and `dragEnd`
+  to ensure correct ordering.
+
 - Don't apply redundant adjustment transformer when a drag overlay is used.
 
 ## [0.7.0] - 2022-09-07

src/drag-drop-context.tsx

@@ -637,10 +637,14 @@ const DragDropProvider: ParentComponent<DragDropContextProps> = (
       },
     };
 
+    recomputeLayouts();
+
     batch(() => {
       setState("active", "draggableId", draggableId);
       addTransformer("draggables", draggableId, transformer);
     });
+
+    detectCollisions();
   };
 
   const dragEnd: DragDropActions["dragEnd"] = () => {
@@ -651,6 +655,8 @@ const DragDropProvider: ParentComponent<DragDropContextProps> = (
       }
       setState("active", ["draggableId", "droppableId"], null);
     });
+
+    recomputeLayouts();
   };
 
   const onDragStart: DragDropActions["onDragStart"] = (handler) => {
@@ -715,12 +721,7 @@ const DragDropProvider: ParentComponent<DragDropContextProps> = (
     );
   };
 
-  onDragStart(() => {
-    recomputeLayouts();
-    detectCollisions();
-  });
   onDragMove(() => detectCollisions());
-  onDragEnd(() => recomputeLayouts());
 
   props.onDragStart && onDragStart(props.onDragStart);
   props.onDragMove && onDragMove(props.onDragMove);