context menu duplicate issue

i am currently having issues with context menus duplicating through RouterLink.

ContextMenu menu = new ContextMenu(UI.getCurrent());
        menu.addItem("Test", (event) -> {

        addToNavbar(true, image, TABS_LAYOUT, TOGGLE_DARK_MODE, menuBar);```

you can see one page is duplicate but other page isnt

even though they both use the same layout

Could you try to describe what it is you’re trying to do, what your code does, and what actually happens? Currently I don’t understand anything of this

Well currently I just want them to be able to right click on any where of the page and it will show up the Context Menu with a couple options like “support” or etc

It works on a normal page

But if I navigate with RouterLink then it starts duplicating

how do you mean “duplicating”?

I don’t see any duplication in the video you posted

do you not see two context menus show up when I right click once?

it’s a bit difficult to tell from a fast moving video, and I can’t really see your right-clicks at all.

But ok so, did I get it right that, after navigating via a RouterLink, you’re getting 2 contextmenus instead of 1 when right-clicking?

if so, my hunch is that you’re adding the contextmenu twice. Perhaps that code that is adding it is executed again after navigation? You could add some debug output there, and of course seeing more of your code might help.

Well they both use the same layout so it could be that it adds it again because of RouterLink

and for the layout:

adding layout:

add(new MainLayout(MainLayout.PAGE.NONE);```

i dont use the annotation to add layout because of specific values for per layout


public class MainLayout extends AppLayout {

    public MainLayout(PAGE page) {

    private void createHeader(PAGE page) {
ContextMenu menu = new ContextMenu(UI.getCurrent());
        menu.addItem("Support", (event) -> UI.getCurrent().getPage().setLocation(Secrets.DISCORD_SUPPORT));
        menu.addItem("Documentation", (event) -> UI.getCurrent().getPage().setLocation(Secrets.DOCUMENTATION));
        addToNavbar(true, image, TABS_LAYOUT, TOGGLE_DARK_MODE, menuBar);

While navigating the UI stays the same and you register the context menu on the UI. So if you add the context menu during each navigation, that means that each navigation adds another context menu. Maybe add the context menu to the root layout of each view that should have it, instead of to the UI.

Never heard about adding it to the root? How would you do that?

the typical way to build an app UI is to have a root layout (which is any container element at all, AppLayout, Div, layout component, whatever), that stays static across navigations. That would typically contain stuff like your navigation etc. The views are loaded into that layout. That’s your root layout.

in any case, it does sound like you’re adding the contextmenu to the UI twice, and that would happen if both view classes have that same createHeader code block. Note that you’re passing the entire UI as a target to the menu – that’s not one view, that’s the entire app UI. So if you do that more than once, you’ll have multiple menus triggered by clicking the UI.

And if you are instantiating a separate subclass of AppLayout for each view, you should rethink that – it’s really not the way to go.