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?