Vaadin 19.0.6 网格项目详细信息在使用@UIScope 导航回视图时卡住

Question

我有一个带有单个 select 网格的视图，其中包含自定义项目详细信息渲染器。视图具有@UIScope 注释。

详细信息有问题 opening\closing。要重现它，您必须离开视图然后 return 返回它（无论如何。使用浏览器后退按钮或使用 vaadin 路由器导航）。

第一种情况，当 setDetailsVisibleOnClick(true) 时，您最终可能会打开或关闭详细信息。例如，我第一次向后导航时，详细信息已打开。然后我重复导航来回查看，这次详细信息已关闭。

第二种情况，当我有 setDetailsVisibleOnClick(false) 并使用 setDetailsVisible 为项目实现点击监听器时。此外，我正在设置 selectedItem 变量，然后在 onAttach 方法中添加 select(selectedItem) 和 setDetailsVisible(selectedItem,true)。现在，当我返回查看该项目时，已 selected 并打开了详细信息。但是，当我 select 其他项目时，记住的项目详细信息保持打开状态。实际上，对于 setDetailsVisibleOnClick(true) 的第一种情况也是如此。如果您 return 查看并打开详细信息，则在您单击其他网格项目后它们将保持打开状态。

   @Override
    public void onAttach(AttachEvent event) {
        //https://github.com/vaadin/vaadin-grid/issues/1850
        setDetailsVisibleOnClick(true);
        setDetailsVisibleOnClick(false);
        if (selectedItem != null) {
            select(selectedItem);
            if (detailsRenderer != null) setDetailsVisible(selectedItem, true);
            scrollToIndex(dataProvider.getItems().indexOf(selectedItem));
        }
    }

和 SingleSelectionListener

event -> {
            var item = event.getSelectedItem().orElse(null);
            if (detailsRenderer != null) {
                var oldVal = event.getOldValue();
                if (selectedItem != null) setDetailsVisible(selectedItem, false);
                if (oldVal != null) setDetailsVisible(oldVal, false);
                if (item != null) setDetailsVisible(item, true);
                getElement().executeJs("this.notifyResize()");//preserve rows heights on grid container resize
            }
            selectedItem = event.getSelectedItem().orElse(null);
        }

Answer 1

我设法解决了这个问题。在我的网格扩展 class:

    public void restoreSavedSelection() {
        var items = dataProvider.getItems();
        if (selectedItem != null && !items.isEmpty() && items.contains(selectedItem)) {
            var index = items.indexOf(selectedItem);//workaround
            select(items.get(index));
            scrollToIndex(index);
        }
    }

    @Override
    public void scrollToIndex(int rowIndex) {
        getElement().executeJs("setTimeout(function() { [=10=].scrollToIndex() })", getElement(), rowIndex);
    }

Vaadin 19.0.6 网格项目详细信息在使用@UIScope 导航回视图时卡住

Vaadin 19.0.6 Grid item details stuck when navigating back to view with @UIScope

vaadin

vaadin-flow