Items jumping when dropping on react beautiful dnd

Question

Trying out the react-beautiful-dnd to create dragabble items but can't find why it is so "jumpy". The dragged item and other items are moving and scaling after moving item and releasing it (see image gif included). Only when dragging an item/card to the end of the list it is settling without any animation and that would be the way I want to have them.

Using material-UI styles and flex in the javascript based css to center the container with the items.

Tried also skipping the drop animation as suggested with no success: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md

Coccyx

for me i have a draggable list, just following the above mentioned github link solved my problem – Coastland

Answer 1

Ok found it in the documents where it says for draggable items: "It is also recommended that you do not apply your own transition property to the dragging element."

Removed this css, the smoothener of the shadow:

transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',

Coccyx

Answer 2

Possible Solution

If someone still is having trouble with it: I was passing this array to SortableContext.(My main data was an array of Objects)

["df2Dfs21", "14gJfs11"]

I have seen it multiple times advised to use an array of string as item. I did it because I saw it on a tutorial and it solved my another issue with dnd-kit. But then items began jumping like that.

Then I passed the whole Array of Object as items to SortableContext, then it was resolved.

[{slug: "df2Dfs21", text: "test 1"}, {slug: "14gJfs11", text: "test 2"}]

Note:

You will need to update the handleDragEnd() after doing this.

The package versions I used:

"dependencies": {
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
}

Olivares