harishv7
commented
2 years ago Hi, I am facing a similar issue where the arrows are not rendering properly. Essentially, the arrows are misplaced, moved down whenever a new node is added.
However, when I scroll the page, the arrows are re-rendered correctly. Could you please help check the issue of re-rendering the arrows. I am not sure if it is rendering at the same time React is rendering the components or something like that. I have already tried calling the updateArrows hook under useEffect, but it doesn't help.
Appreciate your help on this please!
Describe the bug & Expected behavior When I add new item to a vertical list of items, the position of arrow is moved down unexpectedly. I also tried to use the useArrows hook to call the updateArrow function to make it recalculate but it doesn't work.
To Reproduce Here is an example I created on Codesandbox: https://codesandbox.io/s/react-xarrows-bug-qbhniy?file=/src/examplesFiles/Example4.jsx.
You can see when I click on the Add More button, the arrow keeps going down although the position of hello-1 and hello-2 components are not changed.
I tried to change the vertical list to horizontal list and the issue will be disappeared. But currently I need to handle the vertical list so could you please help me to check, thank you!
Screenshots