Modifiers do not work correctly with the keyboard sensor
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
## Description
Several modifiers do not behave correctly when used with the keyboard sensor.
### Restrict to element modifier
The restrict-to-element modifier only restricts the **visual position** of the dragged item but does not clamp the **internal coordinates** tracked by the drag operation. This causes a desync:
1. Move the dragged item to the left edge of the container using the left arrow key
2. Press left arrow several more times — the visual position stays clamped at the edge, but the internal position continues to decrease
3. Press right arrow — nothing visually happens because the internal position is still beyond the left boundary, so the right arrow movement isn't enough to bring it back into the visible range
The modifier should clamp the actual tracked position, not just the visual output, so that subsequent movements in the opposite direction take effect immediately.
### Snap modifier
The snap-to-grid modifier does not ensure that each arrow key press moves the dragged item by the specified grid size. The keyboard sensor moves by a fixed delta per key press, which may not align with the grid. The snap modifier then rounds the result, leading to inconsistent movement — sometimes a key press moves the item, sometimes it doesn't.
## Related
This is also relevant to implementing keyboard-driven navigation in non-sortable scenarios: https://github.com/clauderic/dnd-kit/discussions/1959 — proper modifier support for the keyboard sensor would benefit that use case as well.
Contributor guide
Research direction
Start by tracing the keyboard sensor together with the restrict-to-element and snap-to-grid modifiers, then reproduce the arrow-key sequences described in the issue. Done means the tracked and visual positions stay clamped together, opposite-direction movement works immediately, and each key press advances by the configured grid size.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100