fix: hide menu-bar tooltip on overlay mouseleave to outside (#7322) (#7330)

Author: web-padawan

integration/tests/menu-bar-tooltip.test.js

@@ -14,7 +14,7 @@ import {
 import sinon from 'sinon';
 import '@vaadin/menu-bar';
 import { Tooltip } from '@vaadin/tooltip';
-import { mouseleave } from '@vaadin/tooltip/test/helpers.js';
+import { mouseenter, mouseleave } from '@vaadin/tooltip/test/helpers.js';
 
 export function mouseover(target) {
   fire(target, 'mouseover');
@@ -129,6 +129,14 @@ describe('menu-bar with tooltip', () => {
     expect(tooltip.opened).to.be.false;
   });
 
+  it('should hide tooltip on mouseleave from overlay to outside', () => {
+    const overlay = tooltip._overlayElement;
+    mouseover(buttons[0]);
+    mouseenter(overlay);
+    mouseleave(overlay);
+    expect(overlay.opened).to.be.false;
+  });
+
   it('should not show tooltip on focus without keyboard interaction', async () => {
     buttons[0].focus();
     await nextRender();

packages/menu-bar/src/vaadin-menu-bar-interactions-mixin.js

@@ -34,6 +34,7 @@ export const InteractionsMixin = (superClass) =>
     constructor() {
       super();
       this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
+      this.__boundOnTooltipMouseLeave = this.__onTooltipOverlayMouseLeave.bind(this);
     }
 
     static get observers() {
@@ -119,6 +120,11 @@ export const InteractionsMixin = (superClass) =>
           tooltip.generator = ({ item }) => item && item.tooltip;
         }
 
+        if (!tooltip._mouseLeaveListenerAdded) {
+          tooltip._overlayElement.addEventListener('mouseleave', this.__boundOnTooltipMouseLeave);
+          tooltip._mouseLeaveListenerAdded = true;
+        }
+
         if (!this._subMenu.opened) {
           this._tooltipController.setTarget(button);
           this._tooltipController.setContext({ item: button.item });
@@ -140,6 +146,13 @@ export const InteractionsMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onTooltipOverlayMouseLeave(event) {
+      if (event.relatedTarget !== this._tooltipController.target) {
+        this._hideTooltip();
+      }
+    }
+
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);