React-beautiful-dnd: Invariant failed: Cannot remove the dragging item during a drag

[NicoleRauch]

Bug report

react-beautiful-dnd: Version 10.1.0

When I start dragging an item out of my list, I get a nice crash with the following error message:

When I downgrade to 9.0.2, dragging works without errors.

Expected behavior

I expect the dragging in 10.1.0 to work without crashes and errors.

Actual behavior

I get the above mentioned error. On top of this, I get another error "A cross-origin error was thrown. React doesn't have access to the actual error object in development."

Steps to reproduce

Include the two files below and run them.

What version of React are you using?

"react": "16.7.0",

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

"react-beautiful-dnd": "10.1.0",

What browser are you using?

Chrome 72.0.3626.121 on Mac

Demo

import React, {Component} from "react";
import {DragDropContext, Droppable} from "react-beautiful-dnd";
import Tree from "react-virtualized-tree";
import TheNode from "./TheNode";

export default class TheList extends Component {
    render() {
        return <DragDropContext onDragEnd={() => {}}>
            <Droppable droppableId={"12345"} direction="vertical" isDropDisabled={true}>
                {
                    provided =>
                        <div ref={provided.innerRef} style={{height: 500}}>
                            <Tree
                                nodes={[{name: "Node", id: "12345", children: []}]}
                                onChange={() => {}}
                                nodeMarginLeft={15}>
                                {({node}) => <TheNode node={node}/>}
                            </Tree>
                            {provided.placeholder}
                        </div>
                }
            </Droppable>
        </DragDropContext>
    }
}

import React, {Component} from "react";
import ReactDOM from "react-dom";
import {Draggable} from "react-beautiful-dnd";

const portal: HTMLElement = document.createElement('div');
portal.classList.add('the-portal')
if (!document.body) {throw new Error('body not ready for portal creation!')}
document.body.appendChild(portal)

export default class TheNode extends Component<{node: {name: string}}> {
    render() {
        return (
            <Draggable draggableId={"0"} index={0} disableInteractiveElementBlocking={false} isDragDisabled={false}>
                {
                    (provided, snapshot) => {
                        const child =
                            <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                                <span>{this.props.node.name}</span>
                            </div>;
                        return !snapshot.isDragging ? child : ReactDOM.createPortal(child, portal);
                    }
                }
            </Draggable>
        )
    }
}

[NicoleRauch]

I ran some further experiments, and I found out that this error also occurs with the older version when one of those conditions is true:

• the property isDropDisabled={true} is removed from the Droppable shown above
• the node is dragged outside of the enclosing container

[velmuruganramalingam]

@NicoleRauch , Did you happen to fix the above issue. I get the same error when I try to drag the item from a tree.

[NicoleRauch]

@velmuruganramalingam Sorry, no. I just gave up on using the component altogether.

[alexreardon]

Hi there!

Thanks for raising this issue. Can you please create a standalone example on codesandbox.io using our boilerplate: https://codesandbox.io/s/k260nyxq9v

Without a standalone example, we will not be able to action this one

Cheers!

[ElektrikSpark]

@NicoleRauch @velmuruganramalingam @antoniojps @alexreardon I had this issue as well, but I am glad to report that I have figured out what was causing it. I was having the issue when I had <Draggable key={uuidv4()} draggableId={uuidv4()} index={index}>, so I just created the array like this [...array, { value: value, id: uuidv4() }] where I set the id on the array element. I then changed my code to further reflect the codesandbox as such <Draggable key={item.id} draggableId={item.id} index={index}>. <Draggable> must have, from what I can tell, a unique key and draggableId at all times, and this must stay consistent with the id of the previous render, which I believe was getting reassigned when uuidv4() was getting called every time <Draggable> was re-rendered. When I want to send the array value to a database, I remove that id on a seperate array as removing it on the original array can cause further problems with the array not having the id on the render the database call is made. I hope that the context of my issue can help others fix their issue despite being a slightly different implementation.

[alexreardon]

I had this issue as well, but I am glad to report that I have figured out what was causing it

Oh good!

Please let me know if this needs any more action

[mfaradzh]

@alexreardon
I also have same issue.
Could you please help me figure it out?
https://codesandbox.io/s/distracted-wind-jext0

[R0hannaik]

I'm not being able to perform the reordering function after I have performed it once. The above image is the warning that react is showing me. Please help.

Here is the code to help you understand what is actually happening.
Try adding two elements in the drop elements here and sorting those two elements multiple times.
https://codesandbox.io/s/infallible-darwin-798bb