search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.97k stars 643 forks source link

Unexpected sorting behaviour with Keyboard sensor #790

Open cusxio opened 2 years ago

cusxio commented 2 years ago

Current Behaviour

https://user-images.githubusercontent.com/6487613/172802066-bf5b71d1-b3b4-4198-b9e9-e9a6960e2cc1.mp4

When sorting via the keyboard, pressing the Left/Right arrow key incorrectly selects the next time.

dnd-kit incorrectly selects the item on the next line as the next item.

Note

This bug only happens when the item on the next line is "in-between" the items of the first line. This is probably an edge case where the sorting strategy didn't account for.

Reproduction

https://stackblitz.com/edit/react-ts-a5bddf?file=App.tsx

https://user-images.githubusercontent.com/6487613/172802715-2860349d-97bb-4443-9ed0-a2b924b69ff3.mp4

In the reproduction above, notice how item One incorrectly jumps to Five?

Expected Behaviour

When using the keyboard sensors, the Left/Right arrow should select the next adjacent item.

Pasalietis commented 2 years ago

It's even worse with Up/Down:

https://user-images.githubusercontent.com/3532127/173365953-6a443ab5-4677-4492-a5e3-99670270ce50.mp4

I get this behavior on the official storybook

CroModder commented 1 year ago

Looks like this has been fixed in the experimental branch. You can check storybook example.