Strange behavior when dragging items on the second drag react-beautiful-dnd

Question

For some reason every second drag is not performing very well when using the react-beautiful-dnd package (see image)

my onDragEnd function is looking like this:

  const onDragEnd = result => { 
    if (!result.destination) {
      return;
    }

    if (
      result.destination.droppableId === result.source.droppableId &&
      result.destination.index === result.source.index
    ) {
       return;
    }

    const draggedItem = list[result.source.index];
    list.splice(result.source.index, 1);
    list.splice(result.destination.index, 0, draggedItem);

    /** Firebase update */
    dbCon.once('value', function(snapshot) {
       snapshot.forEach(function(child) {
         list.map((listChild, index) => {
           if (listChild.props.draggableId === child.key) {
             child.ref.update({ position: index });
           }
         });
       });
     });

    setList(getNodes);
  };

Having getNodes that is returning child components

Not sure what the responsible is for this behaviour.. any ideas?

Answer 1

I had this similar issue when I used react-beautiful-dnd version 11.0.0-beta.

Downgrading to 10.1.1 fixed the problem.

You can find the similar issue with 11.0.0-beta where isDragDisabled not working here

Answer 2

Keep in mind that 11.0 is still in beta! It is not recommended for production yet. If you face any issues, please use the stable 10.x release.

We appreciate details on any issues you are facing with 11.0 so we can address them. Submit an issue