Calcite-components: Bug: Updating calcite-tooltip reference-element fails in specific case

[noahmulfinger]

Actual Behavior

When updating the id and reference-element for a calcite-tooltip simultaneously (like via React state), the tooltip stops working if the tooltip is before the reference element. The reason this fails does make some sense. When the calcite-tooltip renders first, it can't find the matching reference element because the element has not been rendered with the new ID yet. This seems like a bug, but could also be addressed through documenting this potential pitfall.

Expected Behavior

I would expect the order of the calcite-tooltip and the reference element to not matter.

Reproduction Steps or Sample

1. Open this code sandbox https://codesandbox.io/s/calcite-tooltip-updating-id-1ewjn
2. Hover over BUTTON WITH TOOLTIP and you should see the tooltip appear
3. Click UPDATE ID (which updates the id stored in React state)
4. Hover over BUTTON WITH TOOLTIP again and the tooltip will not appear
5. Move the <calcite-tooltip... code below the <calcite-tooltip-manager>
6. Now the tooltip will work again

Relevant Info

_Version_: @esri/[email protected]

• [ ] CDN
• [x] NPM package

[driskull]

I think this is kind of expected. If it can't find the ID it's not going to work and it can't wait for that ID to start existing. It uses .getElementById() so if its not there it can't assign it.

In this case, I would recommend to not use a string for the reference element but a HTMLElement. The HTML element is always preferred if possible. The string ID is just a convenience.

[noahmulfinger]

@driskull Thanks. That makes sense. One thing that could address this is having the tooltip query for the reference-element right when the tooltip gets activated. That way it will always have the latest information about the DOM when trying to display the tooltip

If that's not feasible, I think adding some documentation about recommended/best practices would be helpful, like:

• use html element instead of string for reference-element when possible
• if using a string, best to add the tooltip after the tooltip-manager

This was pretty difficult to track down without knowing the internals of calcite-tooltip, so hopefully adding doc would help others.

[driskull]

One thing that could address this is having the tooltip query for the reference-element right when the tooltip gets activated. That way it will always have the latest information about the DOM when trying to display the tooltip

Yeah we might be able to do that. I'll investigate and leave this issue open.

[driskull]

@jcfranco @julio8a can we triage this one and put it in current milestone?

[jcfranco]

Added to the current milestone.