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

[sherman89]

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

[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 :)