fix: don't trigger clicks when dropping array items

measuredco · Jan 30, 2025 · 24de1fc · 24de1fc
1 parent 7a0c1af
commit 24de1fc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 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,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
@@ -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;