diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx index d1e1221ae5e8340cf50e64a15f9cbb17c06fc01d..03d02953e1a8193670aa1b8ab04d13be35ed65ad 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx @@ -235,6 +235,7 @@ export class HyDesktopMenuLinks { let hyHeader = this.el.closest('.hy-site-header') as HTMLElement; const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight; + console.log('leave ' + leaveEvent.clientY + ' ' + headerHeight); if (leaveEvent.clientY < headerHeight - 4) { this.closePanel(); } @@ -242,22 +243,28 @@ export class HyDesktopMenuLinks { event.stopPropagation(); } + /* + Close the panel if mouse is moving over the menu label. + * */ handleDesktopMenuMove(event, id) { - let toggleEvent = event as MouseEvent; - - const activeMenuItem = this.el.shadowRoot.querySelector( - `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label` - ) as HTMLElement; - let topBorder = activeMenuItem.getClientRects()[0].top; - - if (this.currenOpenMenuId == id) { - // Mouse moving around the same menu link - if (toggleEvent.clientY < topBorder) { - this.closePanel(); + if (this.isDesktopMenuOpen) { + let moveEvent = event as MouseEvent; + + const activeMenuItem = this.el.shadowRoot.querySelector( + `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label` + ) as HTMLElement; + let topBorder = activeMenuItem.getClientRects()[0].top; + + if (this.currenOpenMenuId == id) { + // Mouse moving around the same menu link + if (moveEvent.clientY < topBorder - 8) { + console.log(topBorder + ' ' + moveEvent.clientY); + this.closePanel(); + } } - } - event.stopPropagation(); + event.stopPropagation(); + } } handleDesktopMenuFocus(event, id) { @@ -322,18 +329,13 @@ export class HyDesktopMenuLinks { onMouseDown={(e) => this.handleDesktopMenuClick(e, id)} onFocus={(e) => this.handleDesktopMenuFocus(e, id)} onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)} - onMouseLeave={(e) => this.handleDesktopMenuLeave(e)} onMouseMove={(e) => this.handleDesktopMenuMove(e, id)} aria-expanded="false" > <span class={classAttributesLabel}>{label}</span> <hy-icon icon={'hy-icon-caret-down'} size={32} /> </button> - <div - class="hy-desktop-menu-panel" - onMouseLeave={(e) => this.handleDesktopMenuClose(e)} - aria-hidden="true" - > + <div class="hy-desktop-menu-panel" aria-hidden="true"> <div class="hy-desktop-menu-panel__desktop-menu"> <div class="hy-desktop-menu-panel__desktop-menu__menu-items"> <a @@ -418,7 +420,11 @@ export class HyDesktopMenuLinks { render() { return ( - <nav role={'navigation'} class="hy-site-header__menu-desktop"> + <nav + role={'navigation'} + class="hy-site-header__menu-desktop" + onMouseLeave={(e) => this.handleDesktopMenuClose(e)} + > <ul class="hy-site-header__menu-desktop-container">{this.menuLinkItems}</ul> </nav> );