From eaefed97eb5f318076d13ffb5666e2ee345a440d Mon Sep 17 00:00:00 2001
From: Madhuri Sandbhor <madhurisandbhor@gmail.com>
Date: Tue, 25 Jun 2024 17:04:41 +0200
Subject: [PATCH] fix: displayed fields dnd issue (#20613)

---
 .../ListConfiguration/components/DraggableCard.tsx    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/core/content-manager/admin/src/pages/ListConfiguration/components/DraggableCard.tsx b/packages/core/content-manager/admin/src/pages/ListConfiguration/components/DraggableCard.tsx
index eff27082df..38a3491cce 100644
--- a/packages/core/content-manager/admin/src/pages/ListConfiguration/components/DraggableCard.tsx
+++ b/packages/core/content-manager/admin/src/pages/ListConfiguration/components/DraggableCard.tsx
@@ -73,10 +73,13 @@ const DraggableCard = ({
     }
   }, [isDraggingSibling]);
 
-  const composedRefs = useComposedRefs(dragRef, objectRef);
+  const composedRefs = useComposedRefs<HTMLButtonElement>(
+    dropRef,
+    objectRef as React.RefObject<HTMLButtonElement>
+  );
 
   return (
-    <FieldWrapper ref={dropRef}>
+    <FieldWrapper ref={composedRefs}>
       {isDragging && <CardDragPreview label={label} />}
       {!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />}
 
@@ -90,7 +93,7 @@ const DraggableCard = ({
         >
           <Flex gap={3}>
             <DragButton
-              tag="span"
+              ref={dragRef}
               aria-label={formatMessage(
                 {
                   id: getTranslation('components.DraggableCard.move.field'),
@@ -99,8 +102,6 @@ const DraggableCard = ({
                 { item: label }
               )}
               onClick={(e) => e.stopPropagation()}
-              // @ts-expect-error – TODO: fix this TS error
-              ref={composedRefs}
             >
               <Drag />
             </DragButton>