Search code examples
javascriptcssangularlistenerhide

HostListener mouseLeave and pointerLeave not triggered when element is hidden

I'm sitting with a problem where I use the following 2 hostlisteners to call a close function on a element.

@HostListener(
        'pointerleave',
    )
@HostListener(
    'mouseleave',
)

The problem is, the icon it mouseleaves or pointerleaves, is a icon that is shown on hover of another element and hidden when no longer hovering, fixed with css.

My assumption is that if you leave the element fast enough, the display:none is set which will make the hostlisteners not called anymore, so the close function is no longer called.

Anyone has a fix for this?

Solution

  • Turned out to have pointer-events:none; on the css somewhere which breaks this!