TooltipIcon memory leak

[JOldak]

We were using TooltipIcon in a DataTable that changed regularly, and found that the memory use of the page went up and up.

Using an icon directly in the DataTable doesn't have this problem.

It seems that the leak is because TooltipIcon creates a global keydown handler for every icon, which is thus never taken out of the DOM, even when the icon itself has gone. Hence the icon can't be garbage collected.

<svelte:window
  on:keydown="{({ key }) => {
    if (key === 'Escape') {
      hidden = true;
    }
  }}"
/>

I suggest that removing the keydown handler would be an easy/sensible fix. I'm not sure there's a lot of value in having tooltips hide when pressing escape anyway?

Thanks

Joe

[brunnerh]

Such event handlers are cleaned up when the component is destroyed (example), this should generally not cause any issues.

[JOldak]

@brunnerh thanks for the confirmation on this, and the useful example.

After looking into this more fully it seems that the problem is in LiveSvelte, which we're using to add Svelte components to our Phoenix LiveView project. In particular it seems that it never calls the $destroy() method for components, which is why they were showing as memory leaks after using a page for a while. I'll follow this up separately.

It's still debatable whether it's useful to have tooltips close when you press escape (especially as they don't in other places, such as the Button component), but that's a different discussion! :-)

Thanks again

Joe

[theetrain]

In the forthcoming v11 button, it will be using the new Popover experience wherein:

• With icon buttons, focus or hover will activate the tooltip. They can be closed with the Escape key
• With popover components such as Tooltip, the popover can activate with a click or keyboard enter/space. They can be closed by toggling the trigger button again, or using the Escape key