[menu-bar] Close menu on mouseleave when using openOnHover

[gero1992]

Hi all,

I'm using the MenuBar component in my application with the open on hover functionality and I noticed a small bug in the behavior (or at least I would expect something else to happen). The menu opens when the user hovers the icon, but when the hover is gone the menu doesn't close and the user has to click outside of the popup in order to close it. In my opinion when you have a menu bar which opens on hover, the user would expect to close as well when the hover is gone (this behavior was also in Vaadin 8).

Example:

[fdreyfs]

Hi, I'm facing the same issue on Vaadin 14.

For our users this is considered a regression compared to Vaadin 7/8 Do you have any idea on when this will be addressed ?

Best regards Fred

[gero1992]

Hey guys, had some spare time and implemented this functionality. In case of any review questions, please let me know :).

[j-buchhol]

Hey there, my users are facing the same issue. I already took a look at the pull-request from @gero1992 and I think this will fix the problem. I would appreciate it, if someone can make a review and get this pull-request on it's way :) Thanks and regards Julia

[komitoff]

Hey there, I am facing the same issue when using vaadin 14. In the old projects I was participating in (vaadin 8) it was working as explained by @gero1992, but now it does not close on hover out. Would be nice if this feature gets implemented. Thanks Todor

[TatuLund]

It is possible to do this with JavaScript, see the following gist

https://gist.github.com/TatuLund/97841f688c6f256871ede979a36886d5

[TatuLund]

If the motivation of the closing of the menu on "mouseleave" is that there is a button or some other component that you want to click, there is also an another ticket about adding non-modal way of operating to overlays:

https://github.com/vaadin/web-components/issues/451