1

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

enter image description here

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?

Ronald Zwiers
  • 780
  • 2
  • 10
  • 25
  • can you provide a mcve (Minimal, Complete, and Verifiable example) https://stackoverflow.com/help/mcve ? – Abdallatif Sulaiman Apr 03 '19 at 22:41
  • Not clear what the strange behavior is, you didnt really say. – BugsArePeopleToo Apr 03 '19 at 22:48
  • 1
    @Simran I think the problem here is that on the second drag animation it kind of offcenters the other listitem. I struggle with the same problem. – 2hTu2 Apr 04 '19 at 13:10
  • @2hTu2 perhaps the problem is that i take the draggedItem out of the array and after removing the item placing the draggedItem back to the array.. So maybe somekind of an index issue? – Ronald Zwiers Apr 04 '19 at 13:20
  • 1
    @alexandereardon – Ronald Zwiers Apr 05 '19 at 12:48
  • Did you solve this issue ? I am the similar issue. Can you have a look at this https://github.com/softmantk/react-dnd-example.git sometimes, the drag will not work. And usually it is 2nd drag – NIKHIL C M Apr 07 '19 at 07:02
  • 1
    @NIKHILCM actually i did! I found this article what is explaining the problem and give you some handles to fix this: https://medium.com/@eamonngiblin/dynamically-update-positions-during-drag-using-react-beautiful-dnd-4a986d704c2e "your array is being modified in two places (from dnd and from your setState in onDrag), getting re-rendered on the state change despite already being in a Drag action and these are all creating some pretty wonky side effects." – Ronald Zwiers Apr 07 '19 at 07:29
  • thank @RonaldZwiers. But I am still not getting the solution.It will be very helpful if you can you have a look at my code. https://codesandbox.io/embed/github/softmantk/react-dnd-example/tree/master/ If I drag item 1 (take out the garbage) and draging the 2nd item (watch movie) the issue will arise. The onDragEnd logic is very simple but having this weired issue. – NIKHIL C M Apr 07 '19 at 07:49
  • @RonaldZwiers, Downgrading to v10 solved the issue for me. – NIKHIL C M Apr 07 '19 at 10:01
  • try upgrading to `11.0.0-beta.2` – alexreardon Apr 08 '19 at 06:34

2 Answers2

0

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

NIKHIL C M
  • 3,873
  • 2
  • 28
  • 35
0

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

alexreardon
  • 606
  • 5
  • 12