Bug on moving draggables between two containers

[adjioev]

Good day,

found the following bug: I have a layout when one container has a set of child containers and draggables:

If I drag say Draggable2-1 from container 2 to container 1 slowly it works fine but if I flick the mouse (do it quickly) draggable will end up in both Container 1 and Root container (duplicate itself).

What I found: container.notifyParentOnPositionCapture({element}) method has a race condition. Because there are 2 containers inside the root container and assuming we are holding draggable above container 1:

• Container 1 will notify its parent with onChildPositionCaptured(true) method
• Container 2 after that will notify its parent with onChildPositionCaptured(false) method As a result parent ends up with posIsInChildContainer = false. oOf course sometimes container 2 might notify first and everything works fine.

I solved this problem with zero timeout trick:

function notifyParentOnPositionCapture({ element }) {
  let isCaptured = false;
  return ({ draggableInfo, dragResult }) => {
    if (getContainer(element).getParentContainer() && isCaptured !== (dragResult.pos !== null)) {
      isCaptured = dragResult.pos !== null;
      const parent = getContainer(element).getParentContainer();
      if (isCaptured === true) {
        setTimeout(() => {
          parent.onChildPositionCaptured(isCaptured);
        }, 0);
      } else {
        parent.onChildPositionCaptured(isCaptured);
      }
    }
  };
}

Hope that helps.

Best regards, Alex