NavigationManager and SwipeView in a Table scrolls the Table always to the bottom

[vaadin-bot]

Originally by @johannest

---

When using NavigationManager and SwipeView in Table as a generated column or standard Vaadin property, the Table is always scrolled to the bottom. See the test UI below. The reason for this probably that NavigationManager prefetches all the views when first loaded. Disabling/enabling the lazyloading (table.setPageLength(table.size());) does not help.

This issue causes also more issues like the following (tested with Chrome and Firefox):

• When quickly dragging the scrollbar of the Table into the top (when lazy loading is enabled), the Table starts lazyloading and the scroll position is eventually returned to the bottom. Only way to go to the top is scroll small part at the time and even then the behaviour is rather "jumpy". It seems that NavigationManager starts prefetching the views of every row again.
• If calling the table.setCurrentPageFirstItemId(table.getCurrentPageFirstItemId()); to return into the top, it will return almost always there but slowly page-by-page.

This might be related to the ticket: http://dev.vaadin.com/ticket/8842

If this issue "wontfix", I would appreciate a workaround too. The use-case is to have email swiping behaviour (mark as read, move to trash etc.) in the list of messages. I tried this also in CSSLayout and VerticalLayout instead of Table but those were also scrolled into the bottom.

Test UI

private Table table;

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);

    Button button = new Button("scroll to the top");
    button.setWidth("200px");
    button.addClickListener(new ClickListener() {
        @Override
        public void buttonClick(ClickEvent event) {
        table.setCurrentPageFirstItemId(table.getCurrentPageFirstItemId());
        }
    });
    layout.addComponents(button, createTable());
}

public Table createTable() {

    // table = new Table(null, createDs());
    table = new Table();
    table.addContainerProperty("name", Component.class, null);
    for (int i = 0; i < 100; i++) {
        Component component = createEmailSwiperForGivenComponentAndItemId(i);
        table.addItem(new Object[] { component }, i);
    }

    table.setImmediate(true);
    table.setSelectable(true);
    table.setMultiSelect(false);
    table.setNullSelectionAllowed(false);
    table.setColumnHeaderMode(ColumnHeaderMode.HIDDEN);
    table.setSizeFull();
    //table.setPageLength(table.size());
    table.setHeight("600px");
    table.setWidth("300px");

    table.setColumnExpandRatio("name", 1);
    table.setVisibleColumns(new Object[] { "name" });

    return table;
}

private NavigationManager createEmailSwiperForGivenComponentAndItemId(
    Object itemId) {

    Label l0 = new Label("Label - previous");
    Label l1 = new Label("Label - current: " + itemId);
    Label l2 = new Label("Label - next");

    HorizontalLayout lo = new HorizontalLayout(l1);
    lo.setSizeFull();
    lo.setWidth("250px");
    lo.setHeight("36px");
    SwipeView swipeView = new SwipeView(lo);

    final NavigationManager nm = new NavigationManager(swipeView);
    nm.setNextComponent(l2);
    nm.setPreviousComponent(l0);
    return nm;
}

This css also might be needed, otherwise rows are not visible.

.v-table-cell-wrapper {
    height: 44px;
}

---

Imported from https://dev.vaadin.com/ issue #16902