Browse Source

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
tags/8.12.0.alpha1
Anna Koskinen 3 years ago
parent
commit
452357791f
No account linked to committer's email address

+ 1
- 0
compatibility-themes/src/main/themes/VAADIN/themes/base/table/table.scss View File

@@ -137,6 +137,7 @@
}
.#{$primaryStyleName}-body {
border: 1px solid #aaa;
overflow-anchor: none; /* In Chrome 56+ */
}
.#{$primaryStyleName}-row-spacer {
height: 10px;

+ 1
- 0
themes/src/main/themes/VAADIN/themes/valo/components/_table.scss View File

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


+ 86
- 0
uitest/src/main/java/com/vaadin/tests/components/table/TableScrollsOnRefresh.java View File

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

}
}

+ 48
- 0
uitest/src/test/java/com/vaadin/tests/components/table/TableScrollsOnRefreshTest.java View File

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

Loading…
Cancel
Save