PrimeNG Mega-Menu Panel Positioning(custom) only triggers on icon hover instead of entire Menu...

I'm using PrimeNG's Mega Menu component (version 17.17.0) with a vertical orientation. I've implemented a solution to prevent menu panels from overflowing the viewport. Still, the positioning logic only triggers when hovering over the icon (<i> tag) and the menu label (<span> tag)instead of the entire menu item. Hence, it switches between both positionings as I move around the mouse on the menu item.

See this image for reference

The mega menu's DOM structure appears as:

• 
  p-menuitem
  
  • 
    p-menuitem-content
    
    • 
      <a class="root-label"> -- I made this
      
      • 
        <I> - the icon
        
        
      • 
        <span> - the main menu label
        
  • 
    p-megamenu-panel
    

I added this code

@HostListener('mouseover', ['$event'])
onMenuItemHover(event: MouseEvent): void {
const menuItem = (event.target as HTMLElement).closest('.p-menuitem');

if (menuItem) {
const panel = menuItem.querySelector<HTMLElement>('.p-megamenu-panel');

if (panel) {
const rect = panel.getBoundingClientRect();
const viewportHeight = window.innerHeight;

if (rect.bottom > viewportHeight) {
this.renderer.addClass(panel, 'overflow-bottom');
} else {
this.renderer.removeClass(panel, 'overflow-bottom');
}
}
}
}


The viewport overflow check only works when hovering over the icon and the span element, but I need it to work when hovering over the entire root-label anchor tag.

Expected Behavior


The panel positioning should trigger when hovering over any part of the menu item's root label (the entire clickable area), not just the icon.

Question


How can I modify the event listener or DOM traversal to ensure the panel positioning logic triggers when hovering over the entire menu item instead of just the icon and the label span?

What I've Tried

• Using different event target selectors
• Adding event listeners to different elements in the hierarchy
• Experimenting with different CSS selectors in the closest() method

Environment

• Angular: 17.3.0
• PrimeNG: 17.17.0
• Browser: Chrome 128.0.6613.137

Continue reading...