Vaadin 23 VirtualList with 50 or more items loses ClickListener and is not refreshed

Question

Context: In a Vaadin 23.1.3 application there's a VirtualList with items with a ClickListener that refreshes the content of the item.

What works: When there are 3 items in the VirtualList, the ClickListener works fine and after calling callingRefreshItem the item in the VirtualList is re-rendered.

This is how the VirtualList looks like after I clicked the item with id="id2" 6 times (the counter counts up (equals 6) and LocalDateTime is updated, as expected):

What does not work: When there are 7000 items in the VirtualList, (a) the ClickListener stops working after calling refreshItem and (b) the item that should get refreshed (by refreshItem) is not refreshed.

This is how the list looks like with e.g. 7000 items after clicking some items (counter is not refreshed and LocalDateTime is not refreshed):

Code:

@Route("sandbox")
public class SandboxView extends VerticalLayout {

private static class Item {
    String id;
    int clicked=0;
    public Item(String id) {
        super();
        this.id = id;
    }
    @Override
    public boolean equals(Object obj) {
        return this.id.equals(((Item)obj).id);
    }
}

public SandboxView() {
    int numberOfItems = 7000;
    VirtualList<Item> vlist = new VirtualList<>();
    List<Item> items = new ArrayList<>();
    for (int i=0;i<numberOfItems;i++) {
        items.add(new Item("id"+i));
    }
    ListDataProvider<Item> dataProvider = new ListDataProvider<Item>(items);
    vlist.setDataProvider(dataProvider);
    vlist.setRenderer(new ComponentRenderer<Div, Item>(item -> {
            Div div = new Div();
            div.addClickListener(e -> {item.clicked++;System.out.println(item.id + " clicked "+item.clicked+"x");dataProvider.refreshItem(item, true);});
            div.add(item.id+" "+item.clicked+" " +LocalDateTime.now());
            return div;
        }
    ));
    this.add(vlist);
}
}

Further observations:

• It seems that this behavior starts with 50 items in the VirtualList.
• When I scroll away from a broken item and then scroll to the broken item back, the values at the item are refreshed, the ClickListener is present and I can use it a single time. Then I have to scroll away and back again.
• (Update) There is a JavaScript error in the browser: The error has occurred in the JS code: '$0, $1, return $0.$connector.updateData($1)' and this message:

Question: How can I refresh an item in a large VirtualList without losing ClickListeners?

Answer 1

In Vaadin 23.1.6 this is fixed.

https://github.com/vaadin/flow-components/issues/3487#issuecomment-1191292376