I am building an SVG via LiveView to display a primitive map. This means I am drawing some squares with lines between them to indicate connections between areas and also throwing up some text labels as well. Nothing crazy and most things are working as expected.

However I’m noticing that the text nodes for the SVG are not being properly updated when something else changes. For example I might “highlight” one of the areas on the map which triggers a change to how that square is drawn to highlight the focused area. That will update correctly and draw correctly…but for some reason all of the text labels (which did not change at all) will be duplicated on the front end and I will get a cascade of errors from the browser about duplicate ID’s for elements.

This duplication will continue no matter how many times I trigger a change to other elements. So if I click a button to highlight 5 different areas/squares one right after the other I’ll get five more duplicate text elements. All other elements will be properly rendered once whether they were updated or not…this is limited only to the text elements.

Screenshot from 2024-03-17 15-22-37393×655 46.5 KB

I am not building duplicate text elements on the server side (the code used to build/update the map is exactly the same) so it seems like the disconnect might come from how LiveView does its diff between old and new. Maybe I’m doing something wrong that is causing it to add elements on the front end when it should be replacing them? Or maybe I actually found a bug?

Another bit of behavior that points to text not being properly handled with the diffs is that I can draw a map with text on it and it shows up correctly:

Screenshot from 2024-03-17 15-52-00388×393 4.42 KB

If I then, without reloading the page, trigger an update to the map which should draw two linked areas but not labels I get this:

Screenshot from 2024-03-17 15-51-53388×393 4.26 KB

This squares properly updated, meaning the old ones went away entirely and new ones were drawn, but the text lingered even though there is no text at all that should be drawn in the second example. If I load up that second map initially it looks like this:

Screenshot from 2024-03-17 15-56-20388×393 1.8 KB

Once again it looks like text is not being properly tracked/handled inside SVG’s even though rect and path appear to work just fine.