clauderic / clauderic/dnd-kit

Modifiers do not work correctly with the keyboard sensor

Open
#1,960 0 comments 0 reactions 0 assignees View on GitHub
bug dom triage:done
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.