Virtual List rendering issue in Popover / Dialog with ComponentRenderer

[mukherjeesudebi]

Description

When a Virtual List is added inside a Popover component and the list is scrolled to end, then on closing and re opening the Popover, the virtual list is blank and appears only when scrolled.

Expected outcome

The Virtual List should appear without the initial scrolling.

Minimal reproducible example

@Route("popover-virtual-list")
public class PopOverVirtualList extends Div {
	public PopOverVirtualList() {

		Button button = new Button(LumoIcon.BELL.create());
		button.addThemeVariants(ButtonVariant.LUMO_ICON);
		button.setAriaLabel("Notifications");

		Popover popover = new Popover();
		popover.setPosition(PopoverPosition.BOTTOM_END);
		popover.setOpenOnClick(true);
		popover.setCloseOnEsc(true);
		popover.setTarget(button);
		popover.setWidth("300px");
		popover.addThemeVariants(PopoverVariant.ARROW, PopoverVariant.LUMO_NO_PADDING);
		popover.setPosition(PopoverPosition.BOTTOM);
		popover.setAriaLabelledBy("notifications-heading");

		List<Person> people = Person.getPeople(500);
		
		VirtualList<Person> virtualList = new VirtualList<>();
		virtualList.setItems(people);
		virtualList.setRenderer(personCardRenderer);
		add(virtualList);
		popover.add(virtualList);

		add(button, popover);

	}

	private ComponentRenderer<Component, Person> personCardRenderer = new ComponentRenderer<>(person -> {
		HorizontalLayout cardLayout = new HorizontalLayout();
		cardLayout.setMargin(true);

		Avatar avatar = new Avatar(person.getFullName(), null);
		avatar.setHeight("64px");
		avatar.setWidth("64px");

		VerticalLayout infoLayout = new VerticalLayout();
		infoLayout.setSpacing(false);
		infoLayout.setPadding(false);
		infoLayout.getElement().appendChild(ElementFactory.createStrong(person.getFullName()));
		infoLayout.add(new Div(new Text("Dummy profession")));

		VerticalLayout contactLayout = new VerticalLayout();
		contactLayout.setSpacing(false);
		contactLayout.setPadding(false);
		contactLayout.add(new Div(new Text("Dummy email")));
		contactLayout.add(new Div(new Text("Dummy phone")));
		infoLayout.add(new Details("Contact information", contactLayout));

		cardLayout.add(avatar, infoLayout);
		return cardLayout;
	});

}

Steps to reproduce

1. Add the above code to a vaadin 24.6.4 sample project
2. Click on the bell icon to open the Popover
3. Scroll to end
4. Click outside to close the Popover
5. Click on bell icon to re open the Popover

Environment

Vaadin version(s): 24.6.4

Browsers

No response

[subITCSS]

RenderingIssue.mp4

[web-padawan]

Could be related to #6431, see especially #6431 (comment)

[web-padawan]

Reproduced with the web component using the following example:

<button>Open</button>

<vaadin-dialog></vaadin-dialog>

<script type="module">
  import '@vaadin/dialog';
  import '@vaadin/virtual-list';

  const dialog = document.querySelector('vaadin-dialog');
  dialog.renderer = (root) => {
    if (!root.firstChild) {
      const items = Array.from({ length: 100000 }).map((_, i) => {
        return { label: `Item ${i}` };
      });

      const renderer = (root, _, { item }) => {
        root.innerHTML = `<div>${item.label}</div>`;
      };

      const list = document.createElement('vaadin-virtual-list');
      list.style.height = '300px';
      list.items = items;
      list.renderer = renderer;
      root.appendChild(list);
    }
  }

  document.querySelector('button').addEventListener('click', () => {
    dialog.opened = true;
  });
</script>

Steps to reproduce:

1. Open the dialog
2. Scroll the list
3. Re-open the dialog -> items disappear

[web-padawan]

UPD: this seems related to the vaadin-virtual-list being disconnected and moved to other parent, which happens with overlays. The issue occurs even if the visibility of the element doesn't change, see the reproduction below:

<button>Move to body</button>

<div>
  <vaadin-virtual-list style="height: 400px" data-overlay></vaadin-virtual-list>
</div>

<script type="module">
  import '@vaadin/virtual-list';

  const items = Array.from({ length: 100000 }).map((_, i) => {
    return { label: `Item ${i}` };
  });

  const renderer = (root, _, { item }) => {
    root.innerHTML = `<div>${item.label}</div>`;
  };

  const list = document.querySelector('vaadin-virtual-list');
  list.items = items;
  list.renderer = renderer;

  const div = document.querySelector('div');

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
    if (list.hasAttribute('data-overlay')) {
      // Teleport to body
      list.removeAttribute('data-overlay');
      document.body.appendChild(list);
      button.textContent = 'Move to div';
    } else {
      // Teleport to div
      list.setAttribute('data-overlay', '');
      div.appendChild(list);
      button.textContent = 'Move to body';
    }
  });
</script>

[subITCSS]

@web-padawan In which Version is this fixed? Cause basedon https://github.com/vaadin/platform/releases/tag/24.6.5 i still have the rendering issue.

[web-padawan]

The web components 24.6.5 was released but not included in Vaadin platform 24.6.5 so it will land in the next patch version.

[subITCSS]

@web-padawan The issue is still open - so a part of the issue is fixed. But when having the following code we still get a rendering issue. So when the Popover is reopened - the virtual list does not render anything and after scrolling down and up - the data appears visible.

Vaadin_VirtualList_PopOver_Base.mp4

public MainView() {
        Button button = new Button(LumoIcon.BELL.create());
        button.addThemeVariants(ButtonVariant.LUMO_ICON);
        button.setAriaLabel("Notifications");

        Popover popover = new Popover();
        popover.setOpenOnClick(true);
        popover.setCloseOnEsc(true);
        popover.setTarget(button);
        popover.setWidth("300px");
        popover.addThemeVariants(PopoverVariant.ARROW, PopoverVariant.LUMO_NO_PADDING);
        popover.setPosition(PopoverPosition.BOTTOM);
        popover.setAriaLabelledBy("notifications-heading");

        List<Person> people = Person.getPeople(500);

        Div content = new Div();
        content.setWidthFull();
        content.setHeightFull();

        Tab tabA = new Tab("A");
        VirtualList<Person> virtualListA = new VirtualList<>();
        virtualListA.setItems(people.stream().limit(50));
        virtualListA.setRenderer(personCardRenderer);

        Tab tabB = new Tab("B");
        VirtualList<Person> virtualListB = new VirtualList<>();
        virtualListB.setItems(people.stream().skip(50));
        virtualListB.setRenderer(personCardRenderer);

        Tabs tabs = new Tabs();
        tabs.setOrientation(Tabs.Orientation.HORIZONTAL);
        tabs.add(tabA, tabB);
        tabs.addSelectedChangeListener(event -> {
            content.removeAll();
            if (event.getSelectedTab().equals(tabA)) {
                content.add(virtualListA);
            } else {
                content.add(virtualListB);
            }
        });

        popover.addOpenedChangeListener(event -> {
            if (!event.isOpened()) {
                return;
            }

            if (tabs.getSelectedTab().equals(tabA)) {
                content.add(virtualListA);
            } else {
                content.add(virtualListB);
            }
        });

        popover.add(tabs, content);

        add(button, popover);
    }


    private ComponentRenderer<Component, Person> personCardRenderer = new ComponentRenderer<>(person -> {
        HorizontalLayout cardLayout = new HorizontalLayout();
        cardLayout.setMargin(true);

        Avatar avatar = new Avatar(person.getFullName(), null);
        avatar.setHeight("64px");
        avatar.setWidth("64px");

        VerticalLayout infoLayout = new VerticalLayout();
        infoLayout.setSpacing(false);
        infoLayout.setPadding(false);
        infoLayout.getElement().appendChild(ElementFactory.createStrong(person.getFullName()));
        infoLayout.add(new Div(new Text("Dummy profession")));

        VerticalLayout contactLayout = new VerticalLayout();
        contactLayout.setSpacing(false);
        contactLayout.setPadding(false);
        contactLayout.add(new Div(new Text("Dummy email")));
        contactLayout.add(new Div(new Text("Dummy phone")));
        infoLayout.add(new Details("Contact information", contactLayout));

        cardLayout.add(avatar, infoLayout);
        return cardLayout;
    });

public record Person(String fullName) {

	public static List<Person> getPeople(int i) {
		List<Person> people = new ArrayList<>();

		for (int j = 0; j < i; j++) {
			people.add(new Person("Person " + j));
		}

		return people;
	}
}