Popover inside Modeless Dialog

[JGSteinke]

Description

I have a popover in a modeless dialog. The popover goes into the background (even behind the dialog) when the dialog is moved.

I described the problem in the forum, and I was advised to open a ticket. Popover in draggable and modeless dialog - Vaadin Forum I also shared two videos of the problem.

Expected outcome

My expectation is that the popover remains above the dialog when the dialog is moved.

Minimal reproducible example

public class TestView extends HorizontalLayout {

    public TestView() {
        final Button open = new Button("Open");
        open.addClickListener(e -> {
            final var dialog = new Dialog();
            dialog.setModal(false);
            dialog.setDraggable(true);

            final var icon = VaadinIcon.INFO_CIRCLE.create();
            dialog.add(icon);
            final var popover = new Popover(VaadinIcon.INFO_CIRCLE.create(), new Text("This is a info text with icon."));
            popover.setTarget(icon);

            dialog.open();
        });
        add(open);
    }
}

Steps to reproduce

1. Open dialog with the button "Open"
2. Click icon in dialog
3. Move the dialog

Environment

Vaadin version(s): 24.5.0, 24.6.2, 24.7.0.alpha4
OS: Windows 11

Browsers

Firefox

[JGSteinke]

I noticed another issue in this context. When OpenOnHover is used, it can happen that it always opens in the background. If the dialog is large enough, it doesn't even notice it. This is not the case with click.

I was able to reproduce the issue by opening another popover within the popover.

public class TestView extends HorizontalLayout {

    public TestView() {
        final Button open = new Button("Open");
        open.addClickListener(e -> {
            final var dialog = new Dialog();
            dialog.setModal(false);
            dialog.setDraggable(true);

            final var icon = VaadinIcon.INFO_CIRCLE.create();
            dialog.add(icon);
            final var text = new Span("This is a info text with icon.");
            final var popover = new Popover(VaadinIcon.INFO_CIRCLE.create(), text);
            popover.setOpenOnHover(true);
            popover.setTarget(icon);

            final var second = new Popover(VaadinIcon.INFO_CIRCLE.create(), new Text("This is a info text with icon."));
            second.setOpenOnClick(true);
            second.setTarget(text);

            dialog.open();
        });
        add(open);
    }
}

20250116-0940-06.5225206.mp4

[yuriy-fix]

Dialogs still need to be brought to the front on click/move, however popovers opened within the same stacking context should preserve the stacking context order as well.