Multiple Tabs TinyMce editor disappears.

[eugene-ramirez-wshs]

I'm using TincyMCE in one of my tabs. When I click on another tab and click back on the tab where TinyMCE is the editor disappears but the contents of the editor are there just not able to modify them. I have attached a small sample code that reproduces it.

import java.util.HashMap; import java.util.Map;

import org.vaadin.tinymce.TinyMce;

import com.vaadin.flow.component.Component; import com.vaadin.flow.component.Composite; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.tabs.Tab; import com.vaadin.flow.component.tabs.Tabs; import com.vaadin.flow.router.Route;

@Route(value="test-view") public class TestView extends Composite{

private static final long serialVersionUID = 1L;

private Tab tab1=new Tab("tab 1");
private Tab tab2=new Tab("tabl 2");
private Tabs tabs=new Tabs(tab1,tab2);
private VerticalLayout tab1Layout=new VerticalLayout();
private VerticalLayout tab2Layout=new VerticalLayout();
private Map<Tab,Component> tabsToPages=new HashMap<>();
private VerticalLayout content=new VerticalLayout();

public TestView() {
    this.getContent().setSizeFull();    
    TinyMce editor=new TinyMce();
    editor.setEditorContent("sample text");
    tab1Layout.add(new Span("Tiny MCE Editor"),editor);
    tab2Layout.add(new Span("tab 2"));

    tabsToPages.put(tab1, tab1Layout);
    tabsToPages.put(tab2, tab2Layout);
    this.getContent().add(tabs);
    this.getContent().add(content);
    content.add(tab1Layout);

    tabs.addSelectedChangeListener(event -> {
        content.removeAll();
        content.add(tabsToPages.get(tabs.getSelectedTab()));
    });

}

}