IllegalArgumentException: 'Not in the list' when switching between tables w

Flow
1

IllegalArgumentException: ‘Not in the list’ when switching between tables with components

Hi, we have several tables that contain checkboxes or other components. These tables are displayed in different tabs. Switching between the tabs leads to an IllegalArgumentException: ‘Not in the list’ without reference to our own source code.

java.lang.IllegalArgumentException: Not in the list
at com.vaadin.flow.dom.impl.AbstractNodeStateProvider.removeChild(AbstractNodeStateProvider.java:123) ~[flow-server-1.4.2.jar:1.4.2]

We use the vaadin version 14.1.3

Here the example code. Switching from the first tab to the second tab works. Switching from the second tab back to the first tab throws the exception.
Can anybody help?
Thank you!

    Tab firstTab = new Tab("First tab");
    Tab secondTab = new Tab("Second tab");
    Grid<Person> firstGrid = createGrid();
    Grid<Person> secondGrid = createGrid();

    Tabs tabs = new Tabs();
    tabs.add(firstTab);
    tabs.add(secondTab);

    VerticalLayout contentLayout = new VerticalLayout();
    contentLayout.setWidth("400px");
    contentLayout.add(firstGrid);

    tabs.addSelectedChangeListener(e -> {
      contentLayout.removeAll();

      if(tabs.getSelectedTab() == firstTab)
        contentLayout.add(firstGrid);
      else
        contentLayout.add(secondGrid);
    });

    add(tabs, contentLayout);



  private Grid<Person> createGrid() {
    Grid<Person> table = new Grid<>();

    table.addColumn(Person::getFirstName).setHeader("First name");
    table.addColumn(Person::getLastName).setHeader("Last name");
    table.addColumn(new ComponentRenderer<>(Person::getCheckbox)).setHeader("CheckBox");

    List<Person> personList = new ArrayList<>();
    personList.add(new Person());
    personList.add(new Person());
    personList.add(new Person());

    table.setItems(personList);
    return table;
  }

  public static class Person {
    private final Checkbox checkbox = new Checkbox();

    public String getFirstName() {
      return "first name";
    }

    public String getLastName() {
      return "last name";
    }

    public Checkbox getCheckbox() {
      return checkbox;
    }
  }
2

Hmm this indeed seems strange. I don’t see a mistake in the code, it should work in my opinion.
The error seems to be caused by contentLayout.removeAll() even if I see no reason why it would fail there. Can you try hiding and showing the grids, instead of adding and removing, and see if that works?

VerticalLayout contentLayout = new VerticalLayout();
contentLayout.setWidth("400px");
contentLayout.add(firstGrid);
contentLayout.add(secondGrid);
secondGrid.setVisible(false); // initially hide secondGrid

tabs.addSelectedChangeListener(e -> {
  if(tabs.getSelectedTab() == firstTab)
	firstGrid.setVisible(true);
	secondGrid.setVisible(false);
  else
	firstGrid.setVisible(false);
	secondGrid.setVisible(true);
});

addendum: this approach will get messy for each additional Tab. In the [examples]
(https://vaadin.com/components/vaadin-tabs/java-examples), you can see how you can scale this approach better when you have more than two tabs (example “Tabs with pages”). The only difference there is that they use a separate content div for each tab.

3

Thanks a lot for your help. The workaround (“Tabs with pages”) works very well.