Vaadin 23 具有 50 个或更多项目的虚拟列表会丢失 ClickListener 并且不会刷新

Question

上下文：在Vaadin 23.1.3应用程序中，有一个VirtualList，其中包含带有ClickListener的项目，用于刷新项目的内容。

方法：当 VirtualList 中有 3 个项目时，ClickListener 工作正常，在调用 callingRefreshItem 后，VirtualList 中的项目将被重新呈现。

这是我使用 id=“id2” 单击该项目 6 次后 VirtualList 的外观（计数器计数（等于 6）并且 LocalDateTime 按预期更新）：

什么不起作用：当 VirtualList 中有 7000 个项目时，（a） ClickListener 在调用 refreshItem 后停止工作，（b） 应该刷新的项目（通过 refreshItem）不会刷新。

这是列表的外观，例如单击某些项目后有 7000 个项目（计数器未刷新且 LocalDateTime 未刷新）：

法典：

@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);
}
}

进一步观察：

• 此行为似乎从 VirtualList 中的 50 个项目开始。
• 当我从损坏的项目滚动离开，然后向后滚动到损坏的项目时，该项目的值将刷新，ClickListener 存在，我可以使用它一次。然后我必须滚动离开并再次返回。
• （更新）浏览器中有一个JavaScript错误：JS代码中发生了错误：“$0，$1，返回$0.$connector.updateData（$1）”和以下消息：

问：如何在不丢失 ClickListener的情况下刷新大型 VirtualList 中的项目？

Answer 1

在Vaadin 23.1.6中，这是固定的。

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