fix: keep React drag sorting active after remap

Author: justin-schroeder

playwright/tests-frameworks/index.spec.ts

@@ -127,6 +127,82 @@ test.describe("Vue wrappers working as expected", async () => {
 });
 
 test.describe("React wrapper working as expected", async () => {
+  test("useDragAndDrop() keeps sorting across multiple rows during one drag", async ({
+    browserName,
+  }) => {
+    test.skip(
+      browserName !== "chromium",
+      "Synthetic native DragEvent sequence is only deterministic in Chromium."
+    );
+
+    await page.evaluate(async () => {
+      const originElement = document.getElementById(
+        "react_use_drag_and_drop_continuous_depeche_mode"
+      );
+      const targetIds = [
+        "react_use_drag_and_drop_continuous_duran_duran",
+        "react_use_drag_and_drop_continuous_pet_shop_boys",
+        "react_use_drag_and_drop_continuous_kraftwerk",
+      ];
+
+      if (!originElement) throw new Error("Missing origin element");
+
+      const dataTransfer = new DataTransfer();
+
+      const getEventProps = (element: Element) => {
+        const rect = element.getBoundingClientRect();
+        const x = rect.x + rect.width / 2;
+        const y = rect.y + rect.height / 2;
+
+        return {
+          bubbles: true,
+          cancelable: true,
+          clientX: x,
+          clientY: y,
+          dataTransfer,
+          screenX: x,
+          screenY: y,
+        };
+      };
+
+      originElement.dispatchEvent(
+        new DragEvent("dragstart", getEventProps(originElement))
+      );
+
+      for (const id of targetIds) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        const targetElement = document.getElementById(id);
+
+        if (!targetElement) throw new Error(`Missing target element ${id}`);
+
+        targetElement.dispatchEvent(
+          new DragEvent("dragover", getEventProps(targetElement))
+        );
+
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+
+      const dropElement = document.getElementById(targetIds[targetIds.length - 1]);
+
+      if (!dropElement) throw new Error("Missing drop element");
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      dropElement.dispatchEvent(
+        new DragEvent("drop", getEventProps(dropElement))
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    });
+
+    await expect(
+      page.locator("#react_use_drag_and_drop_continuous_values")
+    ).toHaveText(
+      "duran_duran pet_shop_boys kraftwerk depeche_mode tears_for_fears spandau_ballet"
+    );
+  });
+
   test("dragAndDrop() can enable sorting, accept new values, and update the parent config", async () => {
     // Check that the list items can be sorted
     await drag(page, {

src/index.ts

@@ -2591,9 +2591,9 @@ export function validateSort<T>(
       state.draggedNodes.map((x) => x.el).includes(data.targetData.node.el)
     ) {
       state.currentTargetValue = data.targetData.node.data.value;
-    }
 
-    return false;
+      return false;
+    }
   }
 
   if (state.preventEnter) return false;

src/react/index.ts

@@ -93,6 +93,14 @@ export function useDragAndDrop<E extends HTMLElement, T = unknown>(
 
   useEffect(() => {
     dragAndDrop({ parent, state: [values, setValues], ...options });
+  }, []);
+
+  useEffect(() => {
+    if (parent.current)
+      parentValues.set(parent.current, [
+        values as Array<unknown>,
+        setValues as Dispatch<SetStateAction<Array<unknown>>>,
+      ]);
   }, [values]);
 
   useEffect(() => {

tests-frameworks/react/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Test1 from "./components/Test1";
 import Test2 from "./components/Test2";
+import Test3 from "./components/Test3";
 import Test4 from "./components/Test4";
 import reactLogo from "/reactjs-icon.svg";
 
@@ -15,6 +16,11 @@ const App: React.FC = () => {
         <div className="divider"></div>
         <Test2 id="react_use_drag_and_drop" testDescription="useDragAndDrop" />
         <div className="divider"></div>
+        <Test3
+          id="react_use_drag_and_drop_continuous"
+          testDescription="useDragAndDrop continuous sorting"
+        />
+        <div className="divider"></div>
         <Test4 id="react_deferred_sort" testDescription="deferred renders" />
       </div>
     </>

tests-frameworks/react/components/Test3.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { useDragAndDrop } from "../../../src/react/index";
+
+type Tape = {
+  id: string;
+  label: string;
+};
+
+const tapes: Tape[] = [
+  { id: "depeche_mode", label: "Depeche Mode" },
+  { id: "duran_duran", label: "Duran Duran" },
+  { id: "pet_shop_boys", label: "Pet Shop Boys" },
+  { id: "kraftwerk", label: "Kraftwerk" },
+  { id: "tears_for_fears", label: "Tears for Fears" },
+  { id: "spandau_ballet", label: "Spandau Ballet" },
+];
+
+function Test3(props: { id: string; testDescription: string }) {
+  const [parent, values] = useDragAndDrop<HTMLUListElement, Tape>(tapes);
+
+  return (
+    <>
+      <h3>#{props.id}</h3>
+      <h4>{props.testDescription}</h4>
+      <ul
+        id={props.id}
+        ref={parent}
+        style={{ display: "block", width: "220px" }}
+      >
+        {values.map((tape) => (
+          <li
+            className="item"
+            key={tape.id}
+            id={props.id + "_" + tape.id}
+            style={{
+              boxSizing: "border-box",
+              display: "block",
+              height: "56px",
+              margin: "0 0 8px",
+              padding: "16px",
+              width: "220px",
+            }}
+          >
+            {tape.label}
+          </li>
+        ))}
+      </ul>
+      <span id={props.id + "_values"}>
+        {values.map((x: Tape) => x.id).join(" ")}
+      </span>
+    </>
+  );
+}
+
+export default Test3;