Why can't I set the content again after I have fresh the web page in Vaadin?

Question

I got a strange issue. My web application works as it don't remove text/numbers from text boxes or resetting check boxes when I refresh the web page from the web browser.

But when I refresh the web page then I got the problem:

java.lang.IllegalStateException: Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree
java.lang.IllegalStateException: Unregistered node was not found based on its id. The tree is most likely corrupted.

And

Assertion error: No child node found with id 28
Assertion error: Node 3 is already registered

So why can't I set the content again after I have fresh the web page in Vaadin? I'm using Vaadin 14. If I don't refresh the web page, then I can change the content as much as I want. But as long I don't refresh the web page, then I will not get an error.

Notice that I have @PreserveOnRefresh enabled. Without that, I get no error. But then the text/values and all information will disappear when I refresh the page.

Here is my code.

@Route("")
@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@PreserveOnRefresh
public class MainView extends AppLayout {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public MainView() {

        // Get the components
        BuildPredictValidateTemplate buildPredictValidateTemplate = new BuildPredictValidateTemplate();
        LoadExportTemplate loadExportTemplate = new LoadExportTemplate();

        // Create logo and drawer
        Image barImage = new Image("img/barImage.png", "Fisherfaces Logo");
        barImage.setHeight("55px");
        addToNavbar(new DrawerToggle(), barImage);

        // Create tabs and add listeners to them
        Tab buildPredictValidate = new Tab("Build & Predict & Validate");
        buildPredictValidate.getElement().addEventListener("click", e -> {
            setContent(buildPredictValidateTemplate.getBuildButtonPredictButtonValidateButtonTextArea());
        });
        Tab loadExport = new Tab("Load & Export");
        loadExport.getElement().addEventListener("click", e -> {
            setContent(loadExportTemplate.getSubjectCounterExportButtonUploaders());
        });

        // Add them and place them as vertical
        Tabs tabs = new Tabs(buildPredictValidate, loadExport);
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        addToDrawer(tabs);

    }
}

And

@Data
//@Component
public class BuildPredictValidateTemplate {

    private VerticalLayout buildButtonPredictButtonValidateButtonTextArea;

    public BuildPredictValidateTemplate() {

        // Create the complete form layout
        buildButtonPredictButtonValidateButtonTextArea = createBuildButtonPredictButtonValidateButtonTextArea();

    }

    private VerticalLayout createBuildButtonPredictButtonValidateButtonTextArea() {

        // Text area that works like a terminal
        TextArea textTerminal = new TextArea();
        textTerminal.setPlaceholder("");
        textTerminal.setWidthFull();
        textTerminal.setHeightFull();

        // Progressbar
        ProgressBar progressBar = new ProgressBar();
        progressBar.setValue(0);

        // Buttons for Builing, Predicting and Validate
        Button build = new Button("Build");
        build.addClickListener(e -> {
            System.out.println("Building");
        });
        Button predict = new Button("Predict");
        predict.addClickListener(e -> {
            System.out.println("Predicting");
        });
        Button validate = new Button("Validate");
        validate.addClickListener(e -> {
            System.out.println("Validating");
        });

        // Uploader for prediction
        //Upload upload = new PictureUpload().getUpload();

        // Add them all now
        HorizontalLayout horizon = new HorizontalLayout(build, validate, predict);
        return new VerticalLayout(horizon, progressBar, textTerminal);

    }

}

And also

@Data
//@Component
public class LoadExportTemplate {

    private VerticalLayout subjectCounterExportButtonUploaders;

    public LoadExportTemplate() {
        // Create layout for the uploads
        VerticalLayout uploadsLayout = new VerticalLayout();

        // Create subject counter for how many uploaders we should have
        NumberField subjectCounter = createSubjectCounter(uploadsLayout);

        // Create layout for holding subject counter, export button and uploaders
        subjectCounterExportButtonUploaders = createLayoutForSubjectCounterExportButtonUploaders(subjectCounter, uploadsLayout);

    }

    private VerticalLayout createLayoutForSubjectCounterExportButtonUploaders(NumberField subjectCounter, VerticalLayout uploadsLayout) {
        // Create SubjectCounter and ExportButton on a row
        Button exportButton = new Button("Export to MATLAB code");
        exportButton.addClickListener(e -> {
            System.out.println("Exported to MATLAB code.");
        });
        HorizontalLayout layoutHorizon = new HorizontalLayout(subjectCounter, exportButton);

        // Add the uploaders under the horizontal layout
        return new VerticalLayout(layoutHorizon, uploadsLayout);
    }

    private NumberField createSubjectCounter(VerticalLayout uploadsLayout) {
        NumberField subjectCounter = new NumberField();
        subjectCounter.setValue(1d);
        subjectCounter.setHasControls(true);
        subjectCounter.setMin(1);
        subjectCounter.addValueChangeListener(e-> {
            // First clear, then fill with new uploaders
            uploadsLayout.removeAll();
            for(Double i = 0.0; i < e.getValue(); i++) {
                PictureUpload pictureUpload = new PictureUpload();
                uploadsLayout.add(pictureUpload.getUpload());
            }
        });
        // Add one to begin with
        //PictureUpload pictureUpload = new PictureUpload();
        //uploadsLayout.add(pictureUpload.getUpload());

        return subjectCounter;

    }
}

Answer 1

I believe this is a bug in Vaadin, at least it is not what I would expect to happen.

I have created an issue for it here https://github.com/vaadin/flow/issues/8286

Edit:

As a workaround, you can toggle visibility instead. But this would require you to add all components to e.g. a Div, and set that as the content.

E.g setContent(new Div(component1, component2));

Then when clicking on a tab, you would have to hide all components except the one clicked, e.g.

getContent().getChildren().forEach(component -> {
    boolean visible = component.equals(theComponentIWantToShow);
    component.setVisible(visible);
});