Reattaching or switching visibility makes the component disappear

[stefanuebe]

Simple use case: An input element, for instance a text field, should be visible inside a form, when certain conditions are met; if not, then it should disappear.

In Vaadin such a disappearance can be done either by removing the component from its parent or by setting it invisible. When the component should appear again, it can either be added or set visible.

This seems to be broken when using elements. The node is not added to the DOM after it has been set invisible or removed once.

The attached (and very simplified) test code shows that use case. Use the buttons to see the results.

Test code examples

public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout content = new VerticalLayout();

        TextField textField = new TextField("Hello world");
        content.addComponent(textField);

        Button removeAddButton = new Button("Remove", event -> {
            if (textField.getParent() == content) {
                content.removeComponent(textField);
                event.getButton().setCaption("Add");
            } else {
                content.addComponent(textField, 0);
                event.getButton().setCaption("Remove");
            }
        });

        Button visibilityButton = new Button("Switch visibility", event -> textField.setVisible(!textField.isVisible()));
        content.addComponents(removeAddButton, visibilityButton);

        setContent(content);
        setSizeFull();
    }
}

@JavaScript("vaadin://bower_components/webcomponentsjs/webcomponents-lite.js")
@HtmlImport("vaadin://bower_components/vaadin-text-field/vaadin-text-field.html")
public class TextField extends AbstractElementComponent {

    public TextField(String value) {
        TextFieldElement element = Elements.create(TextFieldElement.class);
        element.setAttribute("value", value); // to see something :)

        Root root = ElementIntegration.getRoot(this);
        root.appendChild(element);
    }
}

@Tag("vaadin-text-field")
public interface TextFieldElement extends Element {
    // Move on, nothing to see here!
}