Popover within Dialog

Flow
1

Hello,

I’m trying to use new Popover component with some widget that is placed within Dialog and this combination seems not working. Popover.open() does nothing.

Any advise?

2

Maybe you can post a sample of your code here. That should work. If there is an example of code you can also create a bug on github

3

Tried to reproduce using setTarget() API of the Popover and this works as expected:

public class PopoverDialogPage extends Div {

    public PopoverDialogPage() {
        Popover popover = new Popover();
        Div content = new Div("Popover content");
        popover.add(content);

        NativeButton target = new NativeButton("Toggle popover");
        popover.setTarget(target);

        Dialog dialog = new Dialog();
        dialog.add(target);

        NativeButton openDialog = new NativeButton("Open dialog",
                event -> dialog.open());

        add(openDialog);
    }
}

Could you please provide a code example or modify this one to reproduce the problem?

4

Here a code example that reproduce the problem:

// This is a button to which we are going to attach popover.
Button button = new Button("Show popover");
button.addClickListener(evt -> {
	// Creating popover, attaching it to the button and showing.
	Popover popover = new Popover();
	popover.add("Sample popover text.");
	popover.setTarget(button);
	popover.open(); // Problem here: nothing happens.
});
// This pane will be displayed within dialog
VerticalLayout pane = new VerticalLayout(button);
// This is a dialog
Dialog dialog = new Dialog("Demo dialog", pane);
dialog.open(); // Dialog get displayed.
5

Thanks, now I can reproduce it as well. Reported an issue: Dynamically created Popover does not open when used in Dialog · Issue #6840 · vaadin/flow-components · GitHub

6

Also, note that this code is problematic since it will create a new popover instance on every click. This should be avoided.

2 Likes
7

What is the problem with that approach? In a way I see that better approach as it doesn’t need to be created for nothing (which uses both cpu and memory).

8

The problem is that the Popover instance will never be removed from the DOM (unlike Dialog, the auto-added Popover doesn’t remove itself when it is closed) and the overlay will remain open.

So after multiple clicks, all of the Popover overlays will be open on top of each other, which you can notice by the growing shadow outside of the overlay.

9

Eh, logical but can be a bit of trap indeed. I changed my helper class to do cleanup in the “openedchanged” listener. I guess similar hack should do the trick for others too.