Merge pull request #15192 from strapi/fix/relation-reordering-scrolling

docs/docs/core/content-manager/hooks/use-drag-and-drop.mdx

@@ -132,7 +132,16 @@ import { ConnectDropTarget, ConnectDragSource, ConnectDragPreview } from 'react-
 interface UseDragAndDropOptions {
   index: number;
   onMoveItem: (newIndex: number, currentIndex: number) => void;
+  /**
+   * @default "regular"
+   * Defines whether the change in index should be immediately over another
+   * dropzone or half way over it (regular).
+   */
+  dropSensitivity?: 'immediate' | 'regular';
   item?: object;
+  /**
+   * @default 'STRAPI_DND'
+   */
   type?: string;
   onCancel?: (index: number) => void;
   onDropItem?: (index: number) => void;

packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -352,9 +352,7 @@ const RelationInput = ({
                 relations,
                 updatePositionOfRelation: handleUpdatePositionOfRelation,
               }}
-              itemKey={(index, { relations: relationsItems }) =>
-                `${relationsItems[index].mainField}_${relationsItems[index].id}`
-              }
+              itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
               innerElementType="ol"
             >
               {ListItem}

packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationItem.js

@@ -50,11 +50,13 @@ export const RelationItem = ({
       item: {
         displayedValue: displayValue,
         status,
+        id,
       },
       onGrabItem,
       onDropItem,
       onCancel,
       onMoveItem: updatePositionOfRelation,
+      dropSensitivity: 'immediate',
     });
 
   const composedRefs = composeRefs(relationRef, dragRef);

packages/core/admin/admin/src/content-manager/hooks/useDragAndDrop.js

@@ -12,6 +12,7 @@ import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';
  *  item?: object,
  *  onStart?: () => void,
  *  onEnd?: () => void,
+ *  dropSensitivity?: 'regular' | 'immediate'
  * } & import('./useKeyboardDragAndDrop').UseKeyboardDragAndDropCallbacks}
  */
 
@@ -39,6 +40,7 @@ export const useDragAndDrop = (
     onDropItem,
     onCancel,
     onMoveItem,
+    dropSensitivity = 'regular',
   }
 ) => {
   const objectRef = useRef(null);
@@ -62,6 +64,7 @@ export const useDragAndDrop = (
         return;
       }
 
+      if (dropSensitivity === 'regular') {
         const hoverBoundingRect = objectRef.current.getBoundingClientRect();
         const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
         const clientOffset = monitor.getClientOffset();
@@ -76,6 +79,7 @@ export const useDragAndDrop = (
         if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
           return;
         }
+      }
 
       // Time to actually perform the action
       onMoveItem(newInd, dragIndex);
@@ -104,6 +108,16 @@ export const useDragAndDrop = (
       }
     },
     canDrag: active,
+    /**
+     * This is for useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */
+    isDragging: item.id
+      ? (monitor) => {
+          return item.id === monitor.getItem().id;
+        }
+      : undefined,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),