Arrows unattaching after drag and drop - but only half the time

I’ve run into a strange bug with this library when used in conjunction with react-beautiful-dnd. When I move a Draggable to a new Droppable, the arrows connected to that Draggable come unattached and point to 0,0. But after I move the Draggable again (to another Droppable), the arrows return. So on and so forth. This behavior was not present when I was experimenting with other arrow libraries, such as react-simple-arrows, so I am raising the issue here.

Anyone have an idea what’s going on here? This is the best svg arrow library I’ve found for react, and I’d really like to use it, so in order to facilitate a solution or workaround I’ve made a CodeSandbox that demonstrates the problem:

https://codesandbox.io/s/vertical-list-with-multiple-drop-targets-forked-4sq6f

[pierpo]

@dimapx No solution yet 😔

I just had another look. I just updated the codesandbox, the provided one was not working: https://codesandbox.io/s/9mpg9

Well, I still wonder what’s going on. It looks like when the element changes columns, react-archer loses track of it. When it only changes rows, it works properly.

I guess (really a rough guess) this is related to how the element is moved from one column to another on react-beautiful-dnd. Somehow, the refs are not properly tracked and handled on react-archer’s side.

It will need further investigation…

[pierpo]

Good news! Solved by 4.0.1 😊

I tried the codesandbox with the repro. Updated react-archer to 4.0.1. It works properly now 🎉