DND not firing the OnDragEnd function

[matheusbento]

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>&nbsp;</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

[sridhar02]

I am also having the same issue using vite, are you able to make it work for @matheusbento ?

[matheusbento]

@sridhar02 not yet :/

if you have some solution please, post it here.

[mindhacker0]

When will this issue be fixed, or can you recommend some substitutes/alternatives for me if it cannot be fixed soon?

[TomasGranda]

@matheusbento did you find the answer? i cant make it work

[tg1482]

Are you adding any transition animation settings to the draggable elements, once I removed from mine, the onDragEnd event seemed to fire for me without needing a "scroll"

[ScripterSugar]

This issue mostly related with the transform/transition style attribute mistakenly applied to the draggable ref element. When the dragging ends, transform attribute must be set to correct initial state so that element can return back to its designated place, if they don't dragging state won't be cleared and thus drag end event won't fire.