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

【问题标题】：Vaadin 19.0.6 Grid item details stuck when navigating back to view with @UIScope使用@UIScope 导航回视图时，Vaadin 19.0.6 网格项详细信息卡住
【发布时间】：2021-05-05 09:52:09
【问题描述】：

我有一个带有单选网格的视图，它具有自定义项目详细信息渲染器。 View 有@UIScope 注解。

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

当 setDetailsVisibleOnClick(true) 时的第一种情况，您最终可能会打开或关闭详细信息。例如，当我第一次返回时，详细信息已打开。然后我重复浏览和返回视图，这次详细信息已关闭。

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

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

【问题讨论】：

您能否从 Vaadin 的 Grid 问题跟踪器中检查这张票，并比较您的问题根本原因是否实际上是相同的 github.com/vaadin/vaadin-grid/issues/1850
不，这是不同的问题。我在 onAttach 代码中特别标记了问题 1850 的解决方法。

标签： vaadin vaadin-flow

【解决方案1】：

我设法像这样解决它。在我的 Grid 扩展类中：

    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() { $0.scrollToIndex($1) })", getElement(), rowIndex);
    }

【讨论】：