From 24de1fc4a142179a5d003d2ab196a48a1534c7b3 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Thu, 30 Jan 2025 12:50:20 +0000
Subject: [PATCH] fix: don't trigger clicks when dropping array items

---
 .../core/components/AutoField/fields/ArrayField/index.tsx | 8 ++++++++
 packages/core/components/Sortable/index.tsx               | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/packages/core/components/AutoField/fields/ArrayField/index.tsx b/packages/core/components/AutoField/fields/ArrayField/index.tsx
index bfb51eb6d9..4d1e62b95d 100644
--- a/packages/core/components/AutoField/fields/ArrayField/index.tsx
+++ b/packages/core/components/AutoField/fields/ArrayField/index.tsx
@@ -100,6 +100,8 @@ export const ArrayField = ({
     }
   }, []);
 
+  const [isDragging, setIsDragging] = useState(false);
+
   const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
 
   if (field.type !== "array" || !field.arrayFields) {
@@ -119,6 +121,7 @@ export const ArrayField = ({
       readOnly={readOnly}
     >
       <SortableProvider
+        onDragStart={() => setIsDragging(true)}
         onMove={(move) => {
           const newValue = reorder(value, move.source, move.target);
           const newArrayStateItems: ItemWithId[] = reorder(
@@ -138,6 +141,7 @@ export const ArrayField = ({
             value: newValue,
             arrayState: { ...arrayState, items: newArrayStateItems },
           });
+          setIsDragging(false);
         }}
       >
         <div
@@ -172,6 +176,8 @@ export const ArrayField = ({
                     >
                       <div
                         onClick={(e) => {
+                          if (isDragging) return;
+
                           e.preventDefault();
                           e.stopPropagation();
 
@@ -334,6 +340,8 @@ export const ArrayField = ({
               type="button"
               className={getClassName("addButton")}
               onClick={() => {
+                if (isDragging) return;
+
                 const existingValue = value || [];
 
                 const newValue = [
diff --git a/packages/core/components/Sortable/index.tsx b/packages/core/components/Sortable/index.tsx
index 703300f9cd..f36e1b074f 100644
--- a/packages/core/components/Sortable/index.tsx
+++ b/packages/core/components/Sortable/index.tsx
@@ -10,8 +10,10 @@ import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 
 export const SortableProvider = ({
   children,
+  onDragStart,
   onMove,
 }: PropsWithChildren<{
+  onDragStart: () => void;
   onMove: (moveData: { source: number; target: number }) => void;
 }>) => {
   const [move, setMove] = useState({ source: -1, target: -1 });
@@ -28,6 +30,7 @@ export const SortableProvider = ({
           },
         }),
       ]}
+      onDragStart={onDragStart}
       onDragOver={(event, manager) => {
         const { operation } = event;
         const { source, target } = operation;