MenuBar overflow closes on hover of rightmost item

[javier-godoy]

Description

When a menubar has full width, moving the mouse from the overflow button to an item in the overflow menu may hover another item in the menubar, which closes the overflow. This behavior depends on the exact trajectory of the mouse cursor.

Expected outcome

I would expect the overflow to remain open, so that I can select an item in the overflow menu.

Minimal reproducible example

MenuBar bar = new MenuBar();
bar.setWidthFull();
add(bar);
IntStream.range(1, 40).forEach(i->bar.addItem("Item "+i));

Steps to reproduce

1. Click the menu bar overflow button
2. Move the mouse along the red line in order to select an item in the overflow menu

Environment

Vaadin versions: 24.3.0.rc1, 23.3.20, 14.10.5

Browsers

Chrome

[tomivirkki]

This could be fixed by adding safe triangles support to Vaadin menu components

[web-padawan]

Seems to be a duplicate of #5942

[javier-godoy]

~@web-padawan Do you happen to know how is vaadin-menu-bar-overlay closed when hovering the other item? It doesn't seem to call the close() method of the overlay.~

https://github.com/vaadin/web-components/blob/8254fcded206863a883f5bb16e2e91eb71057324/packages/menu-bar/src/vaadin-menu-bar-mixin.js#L764