-
-
Notifications
You must be signed in to change notification settings - Fork 640
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Drag Handle stops working when its visibility is toggled (hidden then shown) #1417
Comments
It seems like the issue is in 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... |
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 |
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.movthanks @sherman89 for giving me some info about passing unique |
@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 :) |
Hello. I was facing the same issue but using |
@CoolNewsGuy Hi, check out my post here: TanStack/table#5421 (comment) You need to use |
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:
The text was updated successfully, but these errors were encountered: