fix: don't trigger clicks when dropping array items

measuredco · Jan 30, 2025 · 274aa4e · 274aa4e
1 parent 7a0c1af
commit 274aa4e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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,8 @@ export const ArrayField = ({
       readOnly={readOnly}
     >
       <SortableProvider
+        onDragStart={() => setIsDragging(true)}
+        onDragEnd={() => setIsDragging(false)}
         onMove={(move) => {
           const newValue = reorder(value, move.source, move.target);
           const newArrayStateItems: ItemWithId[] = reorder(
@@ -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
@@ -10,8 +10,12 @@ import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 
 export const SortableProvider = ({
   children,
+  onDragStart,
+  onDragEnd,
   onMove,
 }: PropsWithChildren<{
+  onDragStart: () => void;
+  onDragEnd: () => void;
   onMove: (moveData: { source: number; target: number }) => void;
 }>) => {
   const [move, setMove] = useState({ source: -1, target: -1 });
@@ -28,6 +32,7 @@ export const SortableProvider = ({
           },
         }),
       ]}
+      onDragStart={onDragStart}
       onDragOver={(event, manager) => {
         const { operation } = event;
         const { source, target } = operation;
@@ -60,13 +65,15 @@ export const SortableProvider = ({
         }
       }}
       onDragEnd={() => {
-        if (move.source !== -1 && move.target !== -1) {
-          // Delay until animation finished
-          setTimeout(() => {
+        setTimeout(() => {
+          if (move.source !== -1 && move.target !== -1) {
+            // Delay until animation finished
             // TODO use this in onDragOver instead of optimistic rendering once re-renders reduced to polish out edge cases
             onMove(move);
-          }, 250);
-        }
+          }
+
+          onDragEnd();
+        }, 250);
 
         setMove({ source: -1, target: -1 });
       }}