From fa014896376b0e4ccb19d60dedb1e6d88b86ee92 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Fri, 12 Apr 2024 08:50:51 +0200
Subject: [PATCH] fix: hide menu-bar tooltip on overlay mouseleave to outside
 (#7322) (#7326)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 integration/tests/menu-bar-tooltip.test.js     | 10 +++++++++-
 packages/menu-bar/src/vaadin-menu-bar-mixin.js | 13 +++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/integration/tests/menu-bar-tooltip.test.js b/integration/tests/menu-bar-tooltip.test.js
index 2101ae502b..3b7ce12f3e 100644
--- a/integration/tests/menu-bar-tooltip.test.js
+++ b/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();
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
index 64e1bbd30a..afc5a8d3c7 100644
--- a/packages/menu-bar/src/vaadin-menu-bar-mixin.js
+++ b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -168,6 +168,7 @@ export const MenuBarMixin = (superClass) =>
     constructor() {
       super();
       this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
+      this.__boundOnTooltipMouseLeave = this.__onTooltipOverlayMouseLeave.bind(this);
     }
 
     /**
@@ -592,6 +593,11 @@ export const MenuBarMixin = (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 });
@@ -613,6 +619,13 @@ export const MenuBarMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onTooltipOverlayMouseLeave(event) {
+      if (event.relatedTarget !== this._tooltipController.target) {
+        this._hideTooltip();
+      }
+    }
+
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);