Vaadin Tooltip and Vaadin Popover are not closing all time as configured and expected
Closed this issue · 3 comments
Description
We use Vaadin Tooltip and Popover heavily. Now we considered, tooltip(s) and popover are not consistently closed as configured and a user moves the mouse.
Here is a short demo video that demonstrate the problem.
Expected outcome
All tooltips and popover should always close as configured (delay, or mouse out, ...)
Minimal reproducible example
vaadin_tooltip_popover_issue_demo.zip
Steps to reproduce
Vaadin Tooltip Problem Demo
- Run the Project: mvn spring-boot:run
- Go to http://localhost:8080/
Demo Vaadin Tooltip Problem in Menu Bars
Demo Vaadin Tooltip Problem with MenuBars
Start with the cursor just to the bottom left of MenuItem 13. Move the mouse quickly diagonally through MenuItem 31 to MenuItem 13 and then outside the Menubar (further up and right). Some tooltips remain open. In general, moving the mouse randomly across the menu item matrix produces unwanted results in tooltips staying open. The problem is also noticeable if only one Menu bar is used. If the mouse is moved quickly in and out of a MenuItem with a Tooltip, the Tooltip remains open.
Demo Vaadin Popover Problem
Move the mouse quickly across the different Menu Items to see the Popover Tooltips. If the setHideDelay and setHoverDelay are not EXPLICITLY set to 0 the Popover will remain open. Also if a Popover Delay or Popover Hide Delay is set, the Popover will not close properly when setOpenOnClick is set to false and setOpenOnHover is set to true.
NOTE: THIS PROBLEM IS NOT SPECIFIC TO MENU ITEMS/ MENU BARS. IT IS ALSO PRESENT IF THE POPOVER-TARGET IS ANOTHER COMPONENT LIKE A BUTTON, TEXTFIELD, ETC.
Popovers with Hover Delay of 400ms
NOTE: Move the mouse over the Menu items from right to left and left to right (quickly). Here the Popovers don't close properly (because a hover delay is set). This issue also arises with setHideDelay. The Expected behavior is that the Popovers open with a delay of 400ms but also close when the Target/Popover is no longer hovered (after the number of ms set in setHideDelay).
Popovers with Hover Delay and Hide Delay explicitly set to 0
NOTE: Here the Hover delay is explicitly set to 0. The popovers close properly.
Environment
Vaadin version(s): 24.5.0 .. 24.5.3
OS: Windows 11, Ubuntu
Browsers
Chrome, Firefox, Edge
One problem related to setOpenOnHover
for Popover was fixed in vaadin/web-components#8093 which is included to v24.5.4, so please consider upgrading. I'll check if something is still broken for Popover / Tooltip.
Confirmed the tooltip issue using the following code example:
<div style="height: 50px"></div>
<div style="margin-left: 50px">
<vaadin-menu-bar>
<vaadin-tooltip slot="tooltip" hover-delay="300" hide-delay="300"></vaadin-tooltip>
</vaadin-menu-bar>
</div>
<script type="module">
import '@vaadin/menu-bar';
import '@vaadin/tooltip';
document.querySelector('vaadin-menu-bar').items = [
{ text: 'Item 1', tooltip: 'Tooltip 1' },
{ text: 'Item 2', tooltip: 'Tooltip 2' },
];
</script>
The problem happens specifically when quickly moving cursor horizontally over all buttons.
Note: seems related to the fact that mouseleave
listener is on the container and not individual buttons.
tooltip-hover.mp4
Tooltip issues that I found are fixed by vaadin/web-components#8131 and vaadin/web-components#8135. Closing.