Router doesn't catch anchor events from menu-bar, dispatching vaadin-navigate event works only with replace: true

[Wlad-K]

Description of the bug

I have anchors placed inside MenuBar, in html it looks like this:

<vaadin-menu-bar-list-box theme="icon menu theme-color" role="menu" aria-orientation="vertical">
    <div aria-haspopup="false" theme="icon menu theme-color">
        <a href="link">
            Link
        </a>
    </div>
</vaadin-menu-bar-list-box>

When I click on such link, router doesn't catch it and page fully reloads. I tried to work around it with preventDefault() on click event and firing router event:

e.preventDefault();
window.dispatchEvent(new CustomEvent("vaadin-navigate", {
    detail: {
        url: path,
        replace: false,
        state: null
    }
}));

It did nothing, it worked only when I changed replace to true, which isn't what I want.

Expected behavior

Clicking on <a> inside menu-bar will work the same as other anchors do.

Minimal reproducible example

Function to generate such element:

const anchor = document.createElement("a");
anchor.href = "/test";
render("Test", anchor);

const menuBarItems: MenuBarItem[] = [
    {
        text: "Test",
        children: [{
            component: anchor
        }]
    }];

return html`
        <vaadin-menu-bar .items=${menuBarItems}
                         title="Test"
        ></vaadin-menu-bar>
    `;

Versions

• Vaadin / Flow version: 24.4.3
• Java version: 21.0.1
• OS version: windows 11
• Browser version (if applicable): Chrome Version 131.0.6778.86 (Official Build) (64-bit)
• Application Server (if applicable):
• IDE (if applicable):

[tepi]

Regular anchor element behaves this way in Vaadin, it causes a page reload. If you want router to catch it, add attribute router-link to the anchor element.

[Wlad-K]

@tepi I tried that, and it doesn't do anything. Does it work still for newer version? I found it in documentation for v14 but not newer one.

[tepi]

Ok, then it seems there's some bug somewhere. Adding the attribut is the only thing I see Flow's RouterLink is doing in the latest versions as well: https://github.com/vaadin/flow/blob/main/flow-server/src/main/java/com/vaadin/flow/router/RouterLink.java#L62-L65 - otherwise it's just a standard a tag: @Tag(Tag.A).

[tepi]

Confirmed that it fails. Outside menubar the anchor works as expected (when it has router-link attr), but inside menubar it always does page reload.