fix: displayed fields dnd issue (#20613)

This commit is contained in:
Madhuri Sandbhor 2024-06-25 17:04:41 +02:00 committed by GitHub
parent 9ce8f7df6b
commit eaefed97eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -73,10 +73,13 @@ const DraggableCard = ({
} }
}, [isDraggingSibling]); }, [isDraggingSibling]);
const composedRefs = useComposedRefs(dragRef, objectRef); const composedRefs = useComposedRefs<HTMLButtonElement>(
dropRef,
objectRef as React.RefObject<HTMLButtonElement>
);
return ( return (
<FieldWrapper ref={dropRef}> <FieldWrapper ref={composedRefs}>
{isDragging && <CardDragPreview label={label} />} {isDragging && <CardDragPreview label={label} />}
{!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />} {!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />}
@ -90,7 +93,7 @@ const DraggableCard = ({
> >
<Flex gap={3}> <Flex gap={3}>
<DragButton <DragButton
tag="span" ref={dragRef}
aria-label={formatMessage( aria-label={formatMessage(
{ {
id: getTranslation('components.DraggableCard.move.field'), id: getTranslation('components.DraggableCard.move.field'),
@ -99,8 +102,6 @@ const DraggableCard = ({
{ item: label } { item: label }
)} )}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
// @ts-expect-error TODO: fix this TS error
ref={composedRefs}
> >
<Drag /> <Drag />
</DragButton> </DragButton>