Fix scrolling problem in table in Chrome 56+ (#12015)

* Fix scrolling problem in table in Chrome 56+

Issue #8707, slightly modified cherry-pick of #10492

4 files changed, 136 insertions, 0 deletions

diff --git a/compatibility-themes/src/main/themes/VAADIN/themes/base/table/table.scss b/compatibility-themes/src/main/themes/VAADIN/themes/base/table/table.scss
index 22ffdffa4d..64f700c882 100644
--- a/compatibility-themes/src/main/themes/VAADIN/themes/base/table/table.scss
+++ b/compatibility-themes/src/main/themes/VAADIN/themes/base/table/table.scss
@@ -137,6 +137,7 @@
 }
 .#{$primaryStyleName}-body {
 	border: 1px solid #aaa;
+	overflow-anchor: none; /* In Chrome 56+ */
 }
 .#{$primaryStyleName}-row-spacer {
 	height: 10px;
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
index 4a88c925ff..8443438fe2 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
@@ -268,6 +268,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-body {
     border: $v-table-border-width solid $border-color;
+    overflow-anchor: none; /* In Chrome 56+ */
     @include user-select(text);
   }
 
diff --git a/uitest/src/main/java/com/vaadin/tests/components/table/TableScrollsOnRefresh.java b/uitest/src/main/java/com/vaadin/tests/components/table/TableScrollsOnRefresh.java
new file mode 100644
index 0000000000..8d4ff119ab
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/table/TableScrollsOnRefresh.java
@@ -0,0 +1,86 @@
+package com.vaadin.tests.components.table;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.v7.data.util.BeanItemContainer;
+import com.vaadin.v7.ui.Table;
+
+public class TableScrollsOnRefresh extends AbstractTestUI {
+    private Table table = new Table(
+            "scroll down table, so it loads next page, and then click 'refresh' button");
+    private Button refresh = new Button("refresh");
+    private BeanItemContainer<TableItem> container = new BeanItemContainer<TableItem>(
+            TableItem.class);
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        refresh.addClickListener(new Button.ClickListener() {
+
+            @Override
+            public void buttonClick(Button.ClickEvent event) {
+                table.refreshRowCache();
+            }
+        });
+        table.setSizeFull();
+        addComponents(refresh, table);
+        VerticalLayout vl = getLayout();
+        vl.setExpandRatio(table, 1f);
+        vl.setSizeFull();
+        vl.getParent().setSizeFull();
+        table.setContainerDataSource(container);
+        populateContainer();
+    }
+
+    private void populateContainer() {
+        List<TableItem> items = new ArrayList<TableItem>();
+        for (int i = 0; i < 1000; i++) {
+            items.add(new TableItem("Item " + Integer.toString(i),
+                    "Item description " + Integer.toString(i)));
+
+        }
+        container.addAll(items);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Refreshing row cache shouldn't change scroll position.";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 8707;
+    }
+
+    public class TableItem {
+
+        private String name;
+        private String description;
+
+        public TableItem(String name, String description) {
+            this.name = name;
+            this.description = description;
+        }
+
+        public String getName() {
+            return name;
+        }
+
+        public void setName(String name) {
+            this.name = name;
+        }
+
+        public String getDescription() {
+            return description;
+        }
+
+        public void setDescription(String description) {
+            this.description = description;
+        }
+
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/table/TableScrollsOnRefreshTest.java b/uitest/src/test/java/com/vaadin/tests/components/table/TableScrollsOnRefreshTest.java
new file mode 100644
index 0000000000..b078d00162
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/table/TableScrollsOnRefreshTest.java
@@ -0,0 +1,48 @@
+package com.vaadin.tests.components.table;
+
+import java.util.List;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.TableElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class TableScrollsOnRefreshTest extends MultiBrowserTest {
+
+    @Test
+    public void ensureNoScrolling() throws InterruptedException {
+        openTestURL();
+        TableElement table = $(TableElement.class).first();
+        table.scroll(10000);
+        sleep(500); // wait for both data requests
+        String firstCellText = getFirstVisibleCell(table).getText();
+
+        ButtonElement refresh = $(ButtonElement.class).first();
+        refresh.click();
+        sleep(500); // wait for both data requests
+        Assert.assertEquals(firstCellText,
+                getFirstVisibleCell(table).getText());
+
+        refresh.click();
+        sleep(500); // wait for both data requests
+        Assert.assertEquals(firstCellText,
+                getFirstVisibleCell(table).getText());
+    }
+
+    private WebElement getFirstVisibleCell(TableElement table) {
+        int tableBodyTop = table.findElement(By.className("v-table-body"))
+                .getLocation().getY();
+        List<WebElement> cells = table
+                .findElements(By.className("v-table-cell-content"));
+        for (WebElement cell : cells) {
+            if (cell.getLocation().getY() > tableBodyTop) {
+                return cell;
+            }
+        }
+        return null;
+    }
+}