dnd
dnd copied to clipboard
hello-pangea
DND not firing the OnDragEnd function
Hey Guys. How have you been?
I having the follow issue:
When I drag and drop a table row, it stay as dragging yet, i need to scroll and then the event will be fired.
I already inserted a console log on onDragEnd function, but function is fired only when i scroll.
What I'm using:
"vite": "^4.4.9", "react": "18.0.0", "react-hook-form": "^7.45.0", "react-bootstrap": "2.5.0-beta.1", "@hello-pangea/dnd": "^16.3.0",
Table Code:
<div className={`card`}>
<div className='card-body py-3'>
<div className={`${styleDroppable}`}>
<DragDropContext onDragStart={setDraggingTrue} onDragEnd={onDragEnd}>
<Fragment>
<Table className='table align-middle gs-0 gy-5'>
<thead>
<tr>
<th> </th>
<th className='p-0 min-w-200px'></th>
<th className='p-0 min-w-40px'></th>
</tr>
</thead>
{isMounted ? (
<Droppable droppableId='table-body' type='PERSON'>
{(droppableProvided: DroppableProvided) => (
<tbody
ref={(ref: HTMLElement | null) => {
droppableProvided.innerRef(ref)
}}
{...droppableProvided.droppableProps}
>
<If condition={fields.length}>
<Then>
{fields.map((field: RateType, index: number) => (
<Draggable
key={`fields-${field.type.type}`}
draggableId={`fields-${field?.type.type}`}
index={index}
>
{(
provided: DraggableProvided,
snapshot: DraggableStateSnapshot
) => (
<tr
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<td>
<SvgIcon
className={`${styleName}`}
path='general/icon-move'
size='md'
color={colors.greyIcon}
/>
</td>
<td>
<span className='text-dark fw-bold mb-1 fs-6'>
{t(field?.type?.name)}
</span>
<span className='text-muted fw-semibold d-block fs-7'>
{field?.type?.description}
</span>
</td>
<td>
<div className='row'>
<When condition={field?.type?.type !== toleranceRate}>
<InputMoney
moneyPrefix='R$'
name={`${name}[${index}].value`}
key={`${name}[${field.id}].value`}
placeholder={t('Value')}
required
disabled={false}
className='col'
/>
</When>
<When
condition={[timeFractionRate, toleranceRate].includes(
field?.type?.type ?? ''
)}
>
<InputNumber
name={`${name}[${index}].time`}
key={`${name}[${field.id}].time`}
placeholder={t('Time')}
required
disabled={false}
className='col'
/>
<InputDropdown
name={`${name}[${index}].time_measure`}
key={`${name}[${field.id}].time_measure`}
placeholder={t('Time Measure')}
required
disabled={false}
className={`col`}
laravelOptions={rateMeasures.map((e: any) => ({
...e,
name: t(e.name),
}))}
></InputDropdown>
</When>
</div>
</td>
<td className='text-end'>
<button
onClick={() => handleDelete(index)}
className='btn btn-sm btn-icon btn-bg-light btn-active-color-primary'
>
<KTSVG
path='media/icons/general/icon-trash-line.svg'
className='svg-icon-2'
/>
</button>
</td>
</tr>
)}
</Draggable>
))}
</Then>
<Else>
<tr>
<td colSpan={3}>
<div className='d-flex flex-column w-100 '>
{t('No records found')}
</div>
</td>
</tr>
</Else>
</If>
{droppableProvided.placeholder}
</tbody>
)}
</Droppable>
) : null}
</Table>
</Fragment>
</DragDropContext>
</div>
</div>
</div>
Issue video
https://drive.google.com/file/d/10XrpX-vOnpQ9P1FrsfczHmXBSSUdW2uk/view?usp=sharing
I am also having the same issue using vite, are you able to make it work for @matheusbento ?
When will this issue be fixed, or can you recommend some substitutes/alternatives for me if it cannot be fixed soon?
