Drag Handle stops working when its visibility is toggled (hidden then shown)

[sherman89]

I'm conditionally rendering a drag handle component based on user input, but once its hidden, then shown again, drag n drop stops working. It does handle the click and it seems to think that it's dragging, but the actual dragging does not happen unless I regenerate the data.

I thought this issue was with tanstack table, so I tried without it, but the problem persists.

Codesandbox: https://codesandbox.io/p/devbox/crazy-montalcini-mc8ckm

I would appreciate some help here, thank you!

GIF:

[sherman89]

It seems like the issue is in SortableContext. I figured since data regeneration fixes the issue, the problem probably isn't in the drag handle so I thought I'd force react to "refresh" the SortableContext by setting a key that always changes like so key={`${Date.now()}`} and it seems to work!

Of course this is a hack so I'd rather not do this but at least it seems like I'm moving in the right direction...

[sherman89]

So far I've worked around this issue by exposing a remount function from my table component like so:

// Incrementing this value forces remount of SortableContext.
// See comment for remountSortableContext above.
const [sortableContextKey, setSortableContextKey] = useState(0);

// Expose table ref and other functions to parent. useImperativeHandle works only with forwardRef.
useImperativeHandle(
  ref,
  () => {
    return {
      remountSortableContext() {
        setSortableContextKey(sortableContextKey + 1);
      },
      table
    };
  },
  [sortableContextKey, table]
);

// .....

<SortableContext
  items={identifiers}
  strategy={verticalListSortingStrategy}
  disabled={!enableDragging}
  key={sortableContextKey}
>
 // stuff
</SortableContext>

Now every time the parent restores drag handle column visibility, it calls remountSortableContext on the table ref and that makes drag n drop work again :)

[dalalRohit]

i am also facing the same issue. in my case i have a tanstack-table row where i can expand/collapse row entry to show multiple sub-rows for that row.

Screen.Recording.2024-07-31.at.1.36.04.PM.mov

thanks @sherman89 for giving me some info about passing unique key on every re-render. of course this is not a solution but a hack. but happy to be going in the some right direction.

[sherman89]

@dalalRohit You might be able to avoid the issue altogether by using display:none or not rerendering the drag handle.

In one case I had t localization function in my columns memo which broke dnd, and I managed to fix the problem by making a Translation component and using that instead of passing t to columns useMemo. See linked issue.

If none of those work though or hurt performance too much, then you'll probably have to use this hack but try not to do the remounting too often, only when needed.

Hopefully the next version of dnd-kit fixes this :)

[CoolNewsGuy]

Hello. I was facing the same issue but using Date.now() seems to fix it but is there any performance drawback to this? Also I didn't understand how you used useImperativeHandle hook. Like can you show the whole code for it?

[sherman89]

@CoolNewsGuy Hi, check out my post here: TanStack/table#5421 (comment)

You need to use forwardRef for your table component, and then you can use useImperativeHandle to expose custom functions for the consumer to call.