Invariant failed: Cannot finish a drop animating when no drop is occurring

[navinrangar]

Expected behavior

I have nested DnD- inner and outer. What i want is to drag the outer draggable things, but it is working weird and unexpected. I don't know why?

Actual behavior

Steps to reproduce

Suggested solution?

What version of React are you using?

16.0.0

What version of react-beautiful-dnd are you running?

What browser are you using?

Demo

[JamesReich]

I'm also having this same issue. I can't seem to recreate it outside of my files. What's interesting is that it works for similar things within my application that are based on an identical data structure. I can't figure out for the life of me the difference between them.

Recording of the issue: https://github.com/atlassian/react-beautiful-dnd/assets/22831525/ae9df43f-1087-4862-a34b-21afda2c82b3

Code Snippet from the component in question... Not sure if this is helpful. I tried to recreate that strange behavior and can't do it.

https://pastebin.com/dVXL4p7t

[navinrangar]

FIX : pass key to the draggable and droppable components that is same as their respective draggable or droppable ids.

And, Make sure the key you pass be unique for the item even after re-rendering.

[JamesReich]

Pretty all of those things are addressed. Especially strange that it works for some areas of my codebase and not for others considering it's all using the same data structure.

[darren-finch]

I have been running into a similar issue, although the Invariant failed error only occurs sporadically. I'm not sure what the best way to fix the error is, but part of the issue seems to do with the board not fully updating before the next drag starts. More details here.

I also have noticed that the error only seems to occur when using react 18.2 and react-beautiful-dnd 13.1.1. Previous versions seem to be fine.

[navinrangar]

In my case, it was due to passing 'index' to the draggable components that were changing with re-rendering. So, pass index that constantly represent the same component even after the rendering.

I WAS GETTING THESE TWO ERRORS-

1. [React beautiful DND: Detected non-consecutive <Draggable /> indexes]
2. Invariant failed: Cannot finish a drop animating when no drop is occurring I fixed the 1st one and the other one got fixed too.

[Karan-Dhingra]

I am too facing issue, can anyone help me :(

[isoumpasis]

Can someone give a solution? no index prop doesn't work. <StrictModeDroppable> does not work either on React 18.

[scarface68]

FIX : pass key to the draggable and droppable components that is same as their respective draggable or droppable ids.

And, Make sure the key you pass be unique for the item even after re-rendering.

This worked for me. Thankss.

[ojcal]

I had the same Invariant failed error occurring when dragging and dropping cards fast from one list to another but after lengthy periods of banging head to the wall I think I've found a fix for this specific case.

The fix was to utiltize onDragStart prop of DragDropContext and isDragDisabled prop of Draggables.

To be more specific, the solution was to have two useStates, isCardDragDisabled and isListDragDisabled to be used in two Draggables in my components (Draggables for card and list). When starting to drag a card or a list, a custom function handleOnDragStart on DragDropContext's onDragStart will set either isCardDragDisabled or isListDragDisabled to true. For example, when starting to drag a card, handleOnDragStart is invoked and the type property of start is "card" (based on type prop value of droppables), meaning that in the if statement isColumnDragDisabled is set to true, and vice versa if the list is being dragged and the type property of start is list:

const handleOnDragStart = (start: DragStart) => {
        const { type } = start;
        if (type === "card") {
            setIsListDragDisabled(true);
        }
        if (type === "list") {
            setIsCardDragDisabled(true);
        }
    };

So, for example, when starting to drag a card, isDragDisabled={isListDragDisabled} of list Draggable is now true and the user cannot start dragging a list accidentally when a card drag is still occurring (which caused the invariant error in my case).

After the drag has ended, custom function onDragEnd of DragDropContext will first set both states to false since it's now safe to drag either card or list again:

const onDragEnd = (result: DropResult) => {
        const { destination, source, draggableId, type } = result;
        setIsCardDragDisabled(false);
        setIsListDragDisabled(false);
       
        // update logic of cards and lists
}

[masudhossain]

2024, having this issue still.

[harsh-bhavsar-2001]

2024, having this issue still.

maybe the reason is you passed different values in key and draggableId I had same problem.