Grid: Scrolling not working as expected - Throws JS error #5182
Comments
|
I think the If I make a bigger Treegrid with multiple expanded entries (they are expanded dynamically when the user clicks stuff - not instantly after the Treegrid was created), e.g:
and try to scroll to index = 3 - which should scrollto |
AB-xdev
changed the title
|
Apart from the error, note that |
Yes I also found just out about this:
Looks like a lot has gone wrong when introducing this change:
|
|
This has been introduced as a behavior altering change, as the previous The whole root of the issue is that, due to lazy-loading of child nodes, the component does not have enough information to scroll to an effective index. Thus developers need to specify the path through the tree. I'm not familiar with the behavior of A It should definitely have been mentioned in the release notes, I'll see if we can improve that. We'll also check if we can improve the JavaDoc for the method. |
|
Okay so I tried to make it work with the new Index-Array / new API... and it also doesn't work: PoCCodeNote: Values are hardcoded for simplification @Route("demo")
public class DemoView extends VerticalLayout
{
private final Grid<Dummy> grid = new Grid<>();
private final TreeGrid<Dummy> treeGrid = new TreeGrid<>();
public DemoView()
{
final Dummy dummy3b1 = new Dummy("3B1");
final Dummy dummy3b = new Dummy("3B", List.of(
dummy3b1,
new Dummy("3B2")
));
final Dummy dummy3 = new Dummy("3", List.of(
new Dummy("3A"),
dummy3b,
new Dummy("3C")
));
final List<Dummy> items = List.of(
new Dummy("1", List.of(
new Dummy("1A"),
new Dummy("1B"))),
new Dummy("2"),
dummy3,
new Dummy("4"));
this.grid.addColumn(Dummy::string);
this.grid.setItems(items.stream().flatMap(Dummy::flatten).toList());
this.treeGrid.addHierarchyColumn(Dummy::string);
this.treeGrid.setTreeData(new TreeData<Dummy>().addItems(items, Dummy::nested));
this.add(this.grid, this.treeGrid);
this.grid.addSelectionListener(ev -> ev.getFirstSelectedItem()
.ifPresent(itm -> {
this.grid.select(itm);
this.treeGrid.expand(dummy3, dummy3b);
this.treeGrid.select(itm);
this.treeGrid.scrollToIndex(2, 1, 0);
}));
}
record Dummy(String string, List<Dummy> nested)
{
public Dummy(final String string)
{
this(string, List.of());
}
public static Stream<Dummy> flatten(final Dummy dummy)
{
return Stream.concat(
Stream.of(dummy),
dummy.nested().stream().flatMap(Dummy::flatten)
);
}
}
}Steps to reproduce:
Results in JS errorVaadin5182_2.mp4 |
I kind of understand that but I think usually a user wants to scroll to a specific item and not a specific index. To my use-case: I'm not sure how this is currently possible in any way with the |
|
Did check the error caused by Apart from that I have improved the release notes for |
Description
When performing a click on a Grid, which select the contents of another TreeGrid the following error occurs:
we recently updated to Vaadin 24.1.1 so I highly suspect that this causes the problems.
Similar issue: #5177
UPDATE: The problem is likely related to
TreeGrid#scrollToIndex, without that method everything works fine.Expected outcome
No error
Minimal reproducible example
Note:
ui.beforeClientResponseis used due to vaadin/vaadin-grid-flow#1048 (comment)Steps to reproduce
Vaadin5182.mp4
Environment
Vaadin version(s): 24.1.1
OS: -
Browsers
Issue is not browser related
The text was updated successfully, but these errors were encountered: