htmlElement loses z-index on re-render

[PaulieScanlon]

Describe the bug I'm initially setting a few default markers usinghtmlElement. When a user does something I pass an updated array to htmlElementsData.

To Reproduce I've noticed that on the first load, all markers maintain their correct z-index and when the globe is rotated thet disappear as expected.

When a new array is passed in and the globe is re-rendered they lose this functionally and stay on top of the Globe when it's rotated.

Expected behavior any existing markers should maintain their z-index

Screenshots Initial render screenshot: Markers correctly disappear when the globe is rotated.

After state update screenshot: Markers don't disappear when the globe is rotated.

Desktop (please complete the following information):

• OS: macOS Ventura
• Browser Chrome
• Version 116.0.5845.110

Additional context Here's how i create the HTML markers.

        htmlElementsData={data.points}
        htmlAltitude={0.2}
        htmlElement={(d) => {
          const el = document.createElement('div');
          el.innerHTML = `
                <div class='bg-brand-background/60 rounded border-2 border-brand-border px-2 py-1 -mt-8 -mr-8'>
                   <div class='flex gap-2 items-center'>
                      <div class='w-3 h-3 rounded-full border-2' style="border-color:${d.color}"></div>
                      <strong class='capitalize text-xs'>${d.stop}</strong>
                   </div>
                </div>`;

          return el;
        }}

[PaulieScanlon]

Sorry, this is actually an issue. Looking at the DOM, there are duplicate elements, in my case when I re-render I'm showing and hiding the same point by use of a checkpoint. Rather than adding and removing it, it looks like it just gets added, and added again.

Do you have any top tips to "clean up" or remove all existing htmlElement markers on each state update?

[vasturiano]

@PaulieScanlon only the entries that are at any given time in your htmlElementsData should have corresponding elements in the dom. If you replace an array with another, all of those elements that are not present in the last array will be removed from the dom.

If this is not the behavior you're observing it would be a malfunction, but I am unable to reproduce your case.

So, if the issue persists, would you mind making a simple example on https://codesandbox.io/ that shows it?

[PaulieScanlon]

Thanks! I've since changed the idea slightly so I don't need to show or hide anything, and you're right, with a new array of data, all is ok. It was when I was attempting to filter, and return a new array that I ran into problems. I don't know why there would be a difference because the filtered array was also technically a new array.

I'll see if I can create a CodeSandbox. Thanks for the response!!