Sorting Issue

[mnofrizal]

I am putting the task on the very top of the list, so the overlay shows that it is going to be the very first task in this column, once I dropped the tasks, it goes at the very bottom of the column.

[Georgegriff]

See if you can fix it and share the solution, this is just a starter repo

[ahmedazizkhelifi]

TLDR;
@mnofrizal The issue is in this line:

react-dnd-kit-tailwind-shadcn-ui/src/components/KanbanBoard.tsx

Line 349 in 3e1dbb0

return arrayMove(tasks, activeIndex, overIndex - 1);

If the overIndex is 0, so the to will be negative (-1) and arrayMove function will move the task in array.length + to position which is the last position.

You can find the arrayMove definition here : https://github.com/clauderic/dnd-kit/blob/master/packages/sortable/src/utilities/arrayMove.ts

---

The fix is to use the max of 0 and overIndex - 1

return arrayMove(tasks, activeIndex, Math.max(0, overIndex - 1));

[madebydor]

TLDR; @mnofrizal The issue is in this line:

react-dnd-kit-tailwind-shadcn-ui/src/components/KanbanBoard.tsx

Line 349 in 3e1dbb0

return arrayMove(tasks, activeIndex, overIndex - 1);

If the overIndex is 0, so the to will be negative (-1) and arrayMove function will move the task in array.length + to position which is the last position.

You can find the arrayMove definition here : https://github.com/clauderic/dnd-kit/blob/master/packages/sortable/src/utilities/arrayMove.ts

The fix is to use the max of 0 and overIndex - 1

return arrayMove(tasks, activeIndex, Math.max(0, overIndex - 1));

I can verify the existence of this bug, as it happened to me as well.
I can also verify that @ahmedazizkhelifi solution fixed the bug.
Thank you @ahmedazizkhelifi