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-interactions-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-interactions-mixin.js index f88d096688..eedbcf6dd6 100644 --- a/packages/menu-bar/src/vaadin-menu-bar-interactions-mixin.js +++ b/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);