Skip to content

Virtual list not rendered if dialog is opened #7672

@HerbertsVaadin

Description

@HerbertsVaadin

Description

If a virtual list is created at about the same time as a modal dialog is opened, the contents of the virtual list is never rendered, unless list changes.
Use case:
Having a url path that opens a dialog (to create a new "item"), url path is part of the view, where virtual list displays all the "items".

/virtual-list
Image

/virtual-list/new
Image

/virtual-list/new dialog closed
Image

Expected outcome

Virtual list is rendered properly.

Minimal reproducible example

import com.vaadin.flow.component.dependency.Uses;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.virtuallist.VirtualList;
import com.vaadin.flow.router.*;
import jakarta.annotation.security.PermitAll;
import org.vaadin.lineawesome.LineAwesomeIconUrl;

@PageTitle("Virtual list")
@Route("virtual-list")
@Menu(order = 5, icon = LineAwesomeIconUrl.LIST_ALT)
@PermitAll
@Uses(Icon.class)
public class VirtualListExampleView extends VerticalLayout implements HasUrlParameter<String> {
    public VirtualListExampleView() {
        var title = new H1("Virtual List");

        var virtualList = new VirtualList<String>();
        virtualList.setItems("Item 1", "Item 2", "Item 3");

        add(title, virtualList);
    }


    @Override
    public void setParameter(BeforeEvent beforeEvent, @OptionalParameter String parameter) {
        if ("new".equalsIgnoreCase(parameter)) {
            var dialog = new Dialog("Simple dialog");
            dialog.setCloseOnEsc(true);
            dialog.open();
        }
    }
}

Steps to reproduce

  1. Use the snippet above.
  2. Open /virtual-list path, notice virtual list is rendered.
  3. Open /virtual-list/new path, notice dialog is opened and virtual list is not rendered.
  4. Close the dialog (by clicking outside or pressing escape), notice the virtual list is still not rendered.

Workaround

Currently it works fine if I async delay opening the dialog by 1 second, async opening alone doesn't help.

Environment

Vaadin version(s): 24.6.6, 24.7.3, 24.8.3
OS: Linux Mint 22

Browsers

Chrome, Firefox

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions