ContextMenu Component Bug? (Vaadin FLow )

I came across a strange problem with context menu component (Vaadin 12.0.5).

In my usecase i have 2 pages under a main layout. One page 1 i have a context menu. The bug happens when i do the following:

Navigate to page 1 (context menu is working fine)

Navigate to Page 2

Navigate back to Page 1 (context menu not working)

When i am back on Page 1 the context menu is not showing at all and no error is thrown.
My workaround for this usecase was to create a new context menu in the “afterNavigation(…)” Method.
For me this looks like a quite inefficient way. Also when creating the new one i got a little grafic glitch with the old (not working) context menu so i had to set it invisible before creating a new one:

    @Override
    public void afterNavigation(AfterNavigationEvent event) {
        //Workaround context menu bug
        contextMenu.removeAll();
        contextMenu.setVisible(false);
        //contextMenu.setOpenOnClick(false); --> throws javascript error at runtime after navigating back to page 1
        //contextMenu.setTarget(null); --> throws javascript error at runtime after navigating back to page 1
        contextMenu = new ContextMenu();
        //..recreate menu
    }

Is this a known bug or just a problem in my project?

Hi Jonas,

I’m seeing the same issue too.

I’m using a context menu on a button, so as a work-a-round I hook into the attach and detach events…

myButton.addAttachListener(a -> myContextMenu.setTarget(myButton));
myButton.addDetachListener(a -> myContextMenu.setTarget(null));

Hope this helps.

S.

Hi Jonas,

Could you report that issue here: https://github.com/vaadin/vaadin-context-menu-flow/issues?

Would greatly appreciate it.

Done.
For anyone else you can see the ticket here:

https://github.com/vaadin/vaadin-context-menu-flow/issues/47

Following line solved my problem:

myContextMenu.addAttachListener(a -> myContextMenu.setTarget(myButton));

Hi!

I could not reproduce the bug, as I described in the [issue]
(https://github.com/vaadin/vaadin-context-menu-flow/issues/47).
I might be missing some relevant information.

It would be really helpful if anyone could provide a minimal code example which reproduces the bug.
For example, fork https://github.com/vaadin/skeleton-starter-flow/, make the changes and push them to GitHub.

Hello, I am also having a problem with the ContextMenu, it does’nt show at all. Though I am trying to use the example on this page.
https://vaadin.com/components/vaadin-context-menu/java-examples

When I render the application the ContextMenu does’nt appear, Every other component is working fine, except the contextMenu which I need.

Is there any issue known for this? I tried with different vaadin Flow versions including the last one. But still it does’nt work.

What should I do in this case?

Hi Samantha,

Can you post your code? Have you attached the content menu to a a component?

myContextMenu.setTarget(myComnponent);

Stuart

The next Vaadin 14 pre-release, 14.0.0.rc5, includes a bugfix for ContextMenu not opening at all in some specific cases. You can try if that one fixes your issues once it’s released (today or later during this week).

Yes I did but still not working, this is the code

` public TheAddon() {

	Component target = createTargetComponent();
	filterText.setLabel("TestField");
	filterText.setPlaceholder("you can write here");
	filterText1.setLabel("TestField");
	ContextMenu contextMenu = new ContextMenu();
	Label message = new Label("-");
    contextMenu.setTarget(target);
	contextMenu.addItem(new H5("First menu item"),
	        event -> message.setText("Clicked on the first item"));

    
	MenuItem subMenuItem = contextMenu.addItem("SubMenu Item");
	
	SubMenu subMenu = subMenuItem.getSubMenu();

	Checkbox checkbox = new Checkbox("Checkbox");
	checkbox.setLabel("Checkbox");
	subMenu.addItem(checkbox, event -> message.setText(
	        "Clicked on checkbox with value: " + checkbox.getValue()));

	subMenu.addItem("TextItem",
	        event -> message.setText("Clicked on text item"));

	// Components can also be added to the submenu overlay
	// without creating menu items with add()
	subMenu.addComponentAtIndex(1, new Hr());
	subMenu.add(new Label("This is not a menu item"));
	
	
	contextMenu.setEnabled(true);
	HorizontalLayout toolbar = new HorizontalLayout(contextMenu);
	add(toolbar);
}
private Component createTargetComponent() {
    H2 header = new H2("Right click this component");
    Paragraph paragraph = new Paragraph("(or long touch on mobile)");
    Div div = new Div(header, paragraph);
    div.getStyle().set("border", "1px solid black").set("textAlign",
            "center");
    return div;
}

}`

Pekka Maanpää:
The next Vaadin 14 pre-release, 14.0.0.rc5, includes a bugfix for ContextMenu not opening at all in some specific cases. You can try if that one fixes your issues once it’s released (today or later during this week).

oh ok thank you, does it mean I am not the only one having this issue?

Samantha Nanhan:
oh ok thank you, does it mean I am not the only one having this issue?

We’ve had similar issues in the vaadin.com/components page, but I haven’t been able to reproduce this on my own projects. Vaadin 14.0.0.rc5 has been released now, so you can check if that fixes your case.

After upgrading to vaadin 14.0.8 client error occurred after set contextMenu.setOpenOnClick(true);
17880395.png