Arrows are disappearing when I click a button

[handeArpakus]

Hi pierpo, thank you for this brilliant library first, it is a lifesaver for me. But I have a problem. I use the archer with 2 material tables. I draw the lines between 2 tables' rows. For the targets and the sources, I added a button to each row and connect them. But when I click one of those buttons or the row of the tables, the archers are disappearing, and then if I click a different one they are coming back. I used the refreshScreen() with the ref of the ArcherContainer with onRowClick for the rows and onClick for the buttons, but still the same problem. How can I solve this problem?

[pierpo]

Hey! Thank you for the kind words :blush: It's quite hard to help without a reproduction case, it looks like you're doing things properly but it's hard to tell without an example :cry:

Could you provide a minimal example on https://codesandbox.io/ with the bug you're describing?

[handeArpakus]

Sure, here is the example code of my problem If you click the My Button buttons or the rows of the tables one by one, the archers will come and go https://codesandbox.io/s/archerelement-and-materialtable-rxt3nl?file=/src/App.js

[pierpo]

Thank you for the reproducing example! This will be super helpful! I'll have a look when I'll find the time. I think I remember that others are related so this is important!

[handeArpakus]

Hello again, is there any news? Did you have a chance to look at it?

[pierpo]

Hey! I did look into it, but I still haven't found the cause. My guess is that there are unnecessary rerenders that make the lib go crazy. You could maybe circumvent the issue with proper memoization of props and components.

Still, the lib should behave properly even in this scenario, so I'll keep having a look to make the lib more robust!

[handeArpakus]

Hello again pierpo, is there any news? I tried memoization to fix the rendering problem but it didn't work. Actually, I don't think it is the right way for my system. In memoization, when the data is changed, the page is rendered again. In my system, every time when I click the row, the selected row is changed, so the page is rendered again and the archers are disappearing. Do you have any other idea?

[pierpo]

I'm sorry I still haven't looked deeper into it :cry: I tried with the newest version of the lib (with the rewriting of the core with hooks) but it doesn't solve the issue. I'll investigate more in the future.

You can also dive into the code yourself now that the lib's code should be clearer!

[pierpo]

Actually, I checked with 4.0.1 and it looks like it works better!

Can you confirm?

[handeArpakus]

Hello pierpo, Thank you for the release. They still disappear sometimes but it is very rare. It's much better than the before

[pierpo]

Thanks 😊 The only remaining issue I see with your example is the fact that the arrows are drawn to (0, 0) if target element is not present. This PR will fix this: https://github.com/pierpo/react-archer/pull/178