clauderic / clauderic/dnd-kit

[experimental] How to conditionally cancel a sortable drag event and reset manager's inner optimistic state?

Open
#1,769 4 comments 2 reactions 0 assignees View on GitHub
experimental question react triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

I'm using the latest experimental version of `@dnd-kit` and I have a question about conditionally cancelling a sortable drag event and reverting the manager’s optimistic state.

I'm using `DragDropProvider` with `onDragEnd` and a list of sortable cards using `useSortable`hook.

Here's a simplified version of the code:

```tsx
const onDragEnd = (event, manager) => {
if (someCondition) {
// ❓ How to cancel drag event and reset optimistic state here?
return;
}

// Proceed with updating state
};

return (

{/* sortable components */}

)
```

What’s the proper way to cancel a drag event in this version and reset the internal manager state? Is there a public API or recommended pattern to achieve this?

Thanks in advance for your help - loving the experimental version so far!

Contributor guide

Open the contributing guide

Research direction

Start by tracing the experimental DragDropProvider onDragEnd flow and how useSortable derives its optimistic state. Determine whether the public API exposes cancellation and manager-state reset, then verify the recommended behavior with an appropriate test or documented usage example. Done means conditional cancellation reliably restores the sortable state without requiring private internals.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.