MenuBar - SubMenu item flickers open in bottom right corner after upgrading to Vaadin 24.4.1

[F-Kamp]

Description

Clicking on a MenuBar's item with a SubMenu item displays the sub menu in the bottom right corner of the browser for a few milliseconds. This bug started appearing after upgrading from Vaadin 24.3.11 to 24.4.1.

Recording.2024-06-13.102938.mp4

Expected outcome

The sub menu item should only be visible below the menu bar's item.

Minimal reproducible example

@Route("menuBarDemo")
public class MenuBarDemo extends VerticalLayout {


    @Serial
    private static final long serialVersionUID = 6767738777541856721L;

    public MenuBarDemo() {
        setSizeFull();
        getStyle().set("background", "gray");

        var menuBar = new MenuBar();

        var menuItem = menuBar.addItem("Item1");
        menuItem.getSubMenu().addItem("SubItem1");

        this.add(menuBar);
    }

}

Steps to reproduce

Add the snippet, click on the menu bar

Environment

Vaadin version(s): 24.4.1
OS: Windows 11

Browsers

Chrome, Firefox, Edge

[sissbruecker]

Can confirm, it's a regression in 24.4 due to vaadin/web-components#7015

Edit: Changes in vaadin-menu-bar-mixin.js specifically: https://github.com/vaadin/web-components/pull/7015/files#diff-8e5477dc413052da5b0dfe6bbd6c60443cfad85885db5a12a589b053310a58c7