i have made some reordering each tab in tabs component mechanism but it is working not as i expected and i dont know why. I have some basic example with reordering.
@Route(value = "test")
public class testPanel extends Div {
public newPanel() {
Tabs tabs = new Tabs();
Button btn = new Button("Move 3 to 0");
Button ref = new Button("refresh");
ref.addClickListener(evt ->{
tabs.removeAll();
tabs.add(new Tab("0"));
tabs.add(new Tab("1"));
tabs.add(new Tab("2"));
tabs.add(new Tab("3"));
});
ref.click();
btn.addClickListener(evt -> {
int maxPos= 3;
Tab tab= (Tab) tabs.getChildren().collect(Collectors.toList()).get(maxPos);
tabs.getChildren().forEach( f ->{
int tabPos = Integer.valueOf(((Tab)f).getLabel());
if(tabs.indexOf(f)<maxPos) {
tabs.addComponentAtIndex( tabPos+1, f);
}
});
tabs.addComponentAtIndex(0, tab);
System.out.println(tabs.getChildren().collect(Collectors.toList()));
});
add(btn,ref,tabs);
}
}
When i'm reordering 3rd tab to 0 then my 1 tab is added after 2 tab. But when i'm looking into tabs order in getChildren then i can see that all tabs are in the correct order (3,0,1,2) and when i'm selecting tab 2 it is selecting both tab 1 and 2 and it is treating as if i would choose tab 1 (page for tab 1 is showing). I can't select tab 2 anymore.
I know that in this example i can use only tabs.addComponentAtIndex(0, tab); without reordering other tabs but i need it in my reordering mechanism which is more complicated but problem is this same. In selection listener when i select tab 2 it treats it if i had choose tab 1.
Here it is the order of tabs i getChildren aftek reordering: [Tab{3}, Tab{0}, Tab{1}, Tab{2}]
It is working fine if remove all tabs and when i add them again in correct order.
Content in the element of the component looks correct as well:
<vaadin-tabs>
<vaadin-tab>
3
</vaadin-tab>
<vaadin-tab>
0
</vaadin-tab>
<vaadin-tab>
1
</vaadin-tab>
<vaadin-tab>
2
</vaadin-tab>
</vaadin-tabs>
For 7 tabs it is even weirder when i would change 6 tabs to 0:
