Can't seem to get a second SortableContext to understand a new item is being dragged over it

[yardenroee]

Hi dnd-kit community!

I am working with this really annoying legacy code that I was asked to implement a dnd feature on it. I am unable to refactor the html elements into react components, so I have to work with <table>, <tr>, and <td> elements, and I was able to make it work for the most part.

If a SortableItem exists within its own SortableContext it is working fine and the rendering is beautiful, however, if the item is dragging over to a different SortableContext it is not rendering anything. Does anyone have any idea why this is happening? Here is a video of it happening:

Screen.Recording.2024-07-04.at.12.mp4

And here is my code, sorry for not setting up a sandbox, I have a feeling that I won't be able to reproduce this:

return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
      onDragStart={handleDragStart}
      onDragOver={(event) => {}}
    >
      <table className="documents-table">
        <thead className="upload-table-body">
          <tr>
            <th className="upload-number">#</th>
            <th className="upload-name">item</th>
            <th className="upload-sender">recipient</th>
            <th className="upload-time">uploaded</th>
            <th className="upload-size">size</th>
            <th className="upload-verify">verify</th>
            <th className="upload-download">download</th>
            <th className="upload-delete"></th>
          </tr>
        </thead>
        <tbody className="upload-table-body-scroll">
          {items !== null ? (
            <div>
              {items.map((item, index) => {
                const id = item.id
                const { setNodeRef } = useDroppable({ id })
                const isItemIsComplete = isCompleteWithList(item)
                const isItemVerified =
                  requestIsVerified || item.confirmed == true
                return (
                  <SortableContext
                    id={item.id}
                    items={item.documents.map((doc) => doc.id)}
                    strategy={verticalListSortingStrategy}
                  >
                    <div key={item.id}>
                      <tr className="upload-row divider-row" ref={setNodeRef}>
                        <td className="upload-number">{`${index + 1}.`}</td>
                        <td className="upload-name">
                          <div className="upload-name-container">
                            {item.name}
                            {(isItemIsComplete || isItemVerified) && (
                              <Image
                                className={
                                  isItemVerified ? 'verified-icon' : 'sent-icon'
                                }
                                src={isItemVerified ? VerifiedSVG : CompleteSVG}
                                alt={
                                  isItemVerified
                                    ? 'Item Verified'
                                    : 'Item Complete'
                                }
                                width={15}
                                height={15}
                              />
                            )}
                            {item.rejected && !item.confirmed && (
                              <RejectedIcon className="rejected-item-icon" />
                            )}
                            {item.rejectionMessage && (
                              <MessageSquare
                                className={`rejection-message-icon ${
                                  !item.rejected ? 'previous' : ''
                                }`}
                                onClick={() => setCommentModalItemId(item.id)}
                              />
                            )}
                          </div>
                        </td>
                        <td className="upload-sender"></td>
                        <td className="upload-time"></td>
                        <td className="upload-size"></td>
                        <td className="upload-verify">
                          {requestIsVerified ? (
                            <span className="undo-verify-item-button-wrapper">
                              Verified
                            </span>
                          ) : item.confirmed ? (
                            <div className="undo-verify-item-button-wrapper">
                              <span>verified</span>
                              <button
                                className="undo-verify-item-button"
                                onClick={() => {
                                  setIsSpinning(true)
                                  verifyMutation.mutate(
                                    {
                                      requesterId,
                                      requestId,
                                      documentGroupId: item.id,
                                      body: { confirmed: false },
                                    },
                                    {
                                      onSuccess: () => {
                                        const newItem = {
                                          ...item,
                                          confirmed: false,
                                        }
                                        updateItem(newItem)
                                        setIsSpinning(false)
                                        MySwal.fire({
                                          titleText: 'Item unverified!',
                                          icon: 'success',
                                          showConfirmButton: false,
                                          timer: 1000,
                                          allowOutsideClick: false,
                                        })
                                      },
                                    }
                                  )
                                }}
                              >
                                <Image
                                  src={UndoSVG}
                                  className="undo-icon"
                                  width={15}
                                  height={15}
                                  alt="Undo"
                                />
                              </button>
                            </div>
                          ) : (
                            <Button
                              className="verify-item-button"
                              color="primary"
                              outline
                              onClick={() => {
                                setIsSpinning(true)
                                verifyMutation.mutate(
                                  {
                                    requesterId,
                                    requestId,
                                    documentGroupId: item.id,
                                    body: { confirmed: true },
                                  },
                                  {
                                    onSuccess: () => {
                                      const newItem = {
                                        ...item,
                                        confirmed: true,
                                        rejected: false,
                                      }
                                      updateItem(newItem)
                                      setIsSpinning(false)
                                      MySwal.fire({
                                        titleText: 'Item verified!',
                                        icon: 'success',
                                        showConfirmButton: false,
                                        timer: 1000,
                                        allowOutsideClick: false,
                                      })
                                    },
                                  }
                                )
                              }}
                            >
                              Verify
                            </Button>
                          )}
                        </td>
                        <td className="upload-download"></td>
                        <td className="upload-delete"></td>
                      </tr>
                      {item.documents.map((doc, idx) => (
                        <SortableItem key={doc.id} id={doc.id}>
                          <tr
                            key={doc.id}
                            id={doc.id}
                            style={
                              draggedDocument?.id == doc.id
                                ? { opacity: '50%' }
                                : undefined
                            }
                            className={`upload-row ${
                              (item.type === 1 && idx === 0 && !doc.complete) ||
                              doc.downloadDate
                                ? ''
                                : 'bg-white'
                            } ${
                              // Hide original esig contract if there's a completed contract.
                              item.type === 1 &&
                              item.documents.length > 1 &&
                              idx === 0
                                ? 'hidden'
                                : ''
                            }`}
                          >
                            <td className="upload-number">
                              {(item.type === 1 &&
                                idx === 0 &&
                                !doc.complete) ||
                              doc.downloadDate ? null : (
                                <Circle className="unopened-dot" size={10} />
                              )}
                            </td>
                            <td className="upload-name">
                              <span
                                className={`${
                                  isSupportedForPreview(doc.name)
                                    ? 'text-blue-700 underline cursor-pointer'
                                    : ''
                                }`}
                                onClick={() => {
                                  setDocToShow(doc)
                                }}
                              >
                                {doc.name}
                              </span>
                            </td>
                            <td className="upload-sender">
                              {`${
                                requestSenders?.find(
                                  (sender) => sender.id === doc.senderId
                                )?.firstName || ''
                              } ${
                                requestSenders?.find(
                                  (sender) => sender.id === doc.senderId
                                )?.lastName || ''
                              }`}
                            </td>
                            <td className="upload-time">
                              {item.type === 1 && idx === 0 && !doc.complete
                                ? ''
                                : `${formatDateAbbreviated(
                                    doc.creationDate
                                  )} at ${formatDateTimeOnly(
                                    doc.creationDate
                                  )}`}
                            </td>
                            <td className="upload-size">{doc.stringSize}</td>
                            <th className="upload-verify"></th>
                            <td className="sort-order">
                              <DragNDropIconButton id={doc.id} />
                            </td>
                            <td className="upload-download">
                              {canDownload &&
                              (doc.type === 1 ? doc.complete : true) ? (
                                <DownloadIconButton
                                  onClick={() =>
                                    onClickDownload(
                                      doc.id,
                                      doc.name,
                                      doc.size,
                                      setIsSpinning
                                    )
                                  }
                                />
                              ) : null}
                            </td>

                            <td className="upload-delete">
                              {canDownload &&
                              (doc.type === 1 ? doc.complete : true) ? (
                                <div>
                                  <XCircle
                                    size={18}
                                    className="pointer"
                                    onClick={() => onClickDelete(doc.id)}
                                  />
                                </div>
                              ) : null}
                            </td>
                          </tr>
                        </SortableItem>
                      ))}
                    </div>
                  </SortableContext>
                )
              })}
            </div>
          ) : null}
        </tbody>
        <ViewCommentModal
          isOpen={!!commentModalItemId}
          itemName={selectedItem?.name}
          rejectionMessage={selectedItem?.rejectionMessage}
          close={() => setCommentModalItemId(null)}
          copy={pageCopy.requestPage['en-US']}
          buttonColor={'primary'}
        />
        <FilePreview
          items={items}
          setIsSpinning={setIsSpinning}
          onClickDownload={onClickDownload}
          docToShow={docToShow}
          setDocToShow={setDocToShow}
          isSender={false}
          isSendRequest={false}
          requestId={requestId}
        />
      </table>
      <DragOverlay>
        {draggedDocument ? (
          <table className="documents-table">
            <tr
              dangerouslySetInnerHTML={{
                __html: document
                  .getElementById(draggedDocument.id)
                  ?.innerHTML.toString()!,
              }}
              className={document.getElementById(draggedDocument.id)?.className}
              style={{
                backgroundColor: 'white',
                border: '1px solid black',
                boxShadow: '1px 1px 2px grey',
                display: 'flex',
                alignItems: 'center',
                justifyContent: '',
              }}
            ></tr>
          </table>
        ) : null}
      </DragOverlay>
    </DndContext>
  )