Moving the component to another parent in one request cycle breaks the client side

[stefanuebe]

Simple scenario: the xterm console is shown in an draggable container. That draggable container is moved to another position, which is internally just a remove from parent A and attach to parent B. This results in an "empty" tag on the client side (it looses basically its xterm instance as it seems).

Removing and adding in two request cycles works, also simply hiding and showing it using setVisible.

The following example shows the issue in a simplified manner:

    public XTermView() {
        XTerm xterm = new XTerm();
        xterm.writeln("Hello world.\n\n");
        xterm.setWidth("500px");
        xterm.setHeight("250px");

        VerticalLayout left = new VerticalLayout(xterm);
        VerticalLayout right = new VerticalLayout();

        add(new Button("Switch", event -> {
            Component parent = xterm.getParent().orElse(null);
            if (parent == left) {
                right.add(xterm);
            } else {
                left.add(xterm);
            }
        }));


        SplitLayout layout = new SplitLayout(left, right);
        layout.setSplitterPosition(50);
        layout.setOrientation(SplitLayout.Orientation.HORIZONTAL);
        add(layout);
    }

The resulting element looks like this after using the Switch button:

[javier-godoy]

The terminal is instatiated in the constructor, initialized on _slotchange and disposed in disconnectedCallback, which is wrong and fails in that scenario. Calling remove and add in different cycles works, because the constructor is invoked before adding the component (although the state is lost, see #14 )

[javier-godoy]

As a workaround, a two-phase switch can be initiated with executeJs/then:

 add(new Button("Two phase switch", event -> {
      Component parent = xterm.getParent().orElse(null);
      if (parent == left) {
          xterm.getElement().removeFromParent();
          getElement().executeJs("return").then(later->right.add(xterm));
      } else {
        xterm.getElement().removeFromParent();
        getElement().executeJs("return").then(later->left.add(xterm));
      }
  }));