Failed to execute 'insertBefore' on 'Node'

[anagami]

Hi!
some time. when move block from one column to top another, browser catch error in console Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node..
After this error app broken and need reload page.

Code broken on this line https://github.com/cheton/react-sortable/blob/master/src/index.jsx#L63

[cheton]

The Node.insertBefore method:

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

For a controlled component, this line of code will move the draggable element from the target position back to the original position:

evt.from.insertBefore(evt.item, store.nextSibling);

• evt.from is the parent of the draggable element.
• evt.item is the draggable element.
• store.nextSibling is the next sibling of the draggable element.

First, could you try not making any state changes (i.e. do nothing) within the onChange method and check if it still generates this error?

onChange={(order) => {
    // do nothing
}}

If no errors being occurred, try the following:

onChange={(order) => {
    setTimeout(() => {
        this.props.sortByOrder(order); // Call your sort method
    }, 0);
}}

[cheton]

You can paste your sample code here that will be useful to find out what's going wrong.

[anagami]

part of code

let sortableOptions = {
    onUpdate: this.submitMoveCard,
    onAdd: this.submitMoveCard,
};
componentWillReceiveProps(nextProps) {
    ....
    this.setState({
        cards: nextProps.cards,
    });
}
submitMoveCard(event) {
    ...
    this.props.moveCard(reqData);
}

updateOrder(order) {
    ...
    this.setState({
        cards: newState
    });
}

return <Sortable tag="ul"
    options={sortableOptions}
    onChange={ (order) => this.updateOrder(order) }
>
    {this.renderCard()}

</Sortable>

on sorting update component state and submit new order to server(websocket).
when server response(also with ws) sortable component recive new props with updated order

if onChange callback wrapped with setTimeout - catch more often error.

[cheton]

Not sure if it's caused by multiple sortable instances while mounting/unmounting component. I made an update in v1.0.1 that will remove the instance in componentWillUnmount. Hope this will work for you.

[anagami]

yes i have many columns and i sort card beetwen them
v1.0.1 - doesnt help

[cheton]

If it's possible, could you create a zip archive that contains a workable example so that I can try to reproduce this issue from my side. Thanks.

[brybrophy]

I am getting the same error: NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

I have two image galleries that users can sort and drag/drop images between. I only seem to get this error when I try to pull an image from one gallery to the other within the first 5-6 seconds after the page loads.

[brybrophy]

https://gist.github.com/brybrophy/fffa54f39e18f93e9a436f0cd4a3c5dc

Here is a gist with some of the code. I am using mobx for state management which is why there are actions and no this.setState's.

[cheton]

The "onChange" method relied on Sortable's onStart event to remember the original position of a draggable element. The "nextSibling" variable is used to store the next sibling of the draggable element.

https://github.com/cheton/react-sortable/blob/master/src/index.jsx#L38

options[name] = (evt) => {
    if (name === 'onStart') {
        store.nextSibling = evt.item.nextElementSibling;
        store.activeComponent = this;
    }
}

In normal circumstances, the onStart event should be fired immediately when dragging an item. However, if you do drag & drop very fast, the onStart event may be fired after dropping to the target container, and then evt.item will become an item in the target container as well. In that case, it's not possible to find the original dragging position due to a delayed onStart event.

Replace onStart event with onChoose event might be a solutioin to it, unfortunately, the new onChoose event is only available in Sortable's latest master branch, not in sortablejs@1.4.2 on NPM. A new version release is necessary for binding new events.

[sathishsoundharajan]

Hi, is this related (react/react#8025), if so please upgrade chrome, i persume it solves the issue.

[cheton]

The latest version of sortablejs@1.5.0-rc1 should have resolved the problem. Has anyone tried it?

[chipit24]

I'm using react-sortablejs 1.2.0 and sortablejs 1.5.0-rc1 and still having this issue. Also on a recent version of Chrome (v55).

For now, I'm getting around this by marking the items as deleted, and then batching the deletes up into a deferred function. A style of display: none is applied to items marked as deleted, so the UI still appears to behave the same.