TypeError exception when switching between tabs

Hi,

Before upgrading to Vaadin 10 version 10.0.2, our tabsheets holding grids worked well. But now, it throws a TypeError when switching between tabs.

Browser’s debugger returns the following:

grid.activeItemChangedDetails = function(newVal, oldVal) {
     if(!detailsVisibleOnClick) {
       return;
     }
     if (newVal && !newVal.detailsOpened) {
       grid.$server.setDetailsVisible(newVal.key);
     } else {
       grid.$server.setDetailsVisible(null);
     }
   }
grid.$server is undefined

I’ve attached a sample project for testing purposes, as well as an image collection of the TypeErrors.

Help is much appreciated! :slight_smile:

17186068.zip (29.6 KB)
17186071.png

Hi,

I tried your code and it works correcly with Vaadin 10.0.1 but not with Vaadin 10.0.2 .

I opened a ticket about it.

An alternative solution that works, it is to use the display css property. So you can show or hide your pages that you want to display.

Code: https://github.com/DiegoSanzVi/pages

public void hideAllPages(Collection<Component> pages){
        for(Component p : pages){
            p.getElement().getStyle().set("display","none");
        }
    }

 public void showPage(Component selectedPage){
        selectedPage.getElement().getStyle().set("display","flex");
    }

Diego Sanz Villafruela:
Hi,

I tried your code and it works correcly with Vaadin 10.0.1 but not with Vaadin 10.0.2 .

I opened a ticket about it.

An alternative solution that works, it is to use the display css property. So you can show or hide your pages that you want to display.

Code: https://github.com/DiegoSanzVi/pages

public void hideAllPages(Collection<Component> pages){
        for(Component p : pages){
            p.getElement().getStyle().set("display","none");
        }
    }

 public void showPage(Component selectedPage){
        selectedPage.getElement().getStyle().set("display","flex");
    }

Hi Diego,

Can I have the link to the ticket you opened? Would like to track the updates.

Here is the link of the issue:
https://github.com/vaadin/flow/issues/4448

I have a tabbed page with multiple tabs. Each tab page is a layout (Form or vertical) and I’m using the tabs to select which layout to show.

Using the display style to hide and show tab pages didn’t work for me. It would hide the layouts correctly, but elements would disappear on all but the first page.

Didn’t want to go through setting each element to visible or not, so I ended up removing the grid before setting a layout to be invisible and adding it back when setting it to visible.

That workaround seems to work, but it is obviously not a workable solution if there are multiple grids.

BTW - the error also exists in 10.0.3 and 11.0.0.alpha1

I had the same problem: this now works for me:

public class TabSheet extends Composite<Div> {

    private Tabs tabs = new Tabs();
    private Map<Tab, Component> tabsToPages = new HashMap<>();
    private Div pagesDiv = new Div();
    private Set<Component> pagesShown;

    public TabSheet() {
        tabs.addSelectedChangeListener(event -> {
            hideAllPages(pagesShown);       //pagesShown.forEach(page -> page.setVisible(false));
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            showPage(selectedPage);         //selectedPage.setVisible(true);
            pagesShown.add(selectedPage);
        });
        getContent().add(tabs, pagesDiv);
    }

    public Tab addTab(Component component, String title) {
        Tab tab = new Tab(title);
        Div componentDiv = new Div(component);
        tabs.add(tab);
        tabsToPages.put(tab, componentDiv);
        pagesDiv.add(componentDiv);
        if (tabsToPages.size() == 1) {
            showPage(componentDiv);         //componentDiv.setVisible(true);
            pagesShown = Stream.of(componentDiv).collect(Collectors.toSet());
        } else {
            hidePage(componentDiv);         //componentDiv.setVisible(false);
        }
        return tab;
    }

    public Tab getTab(String searchKey) {
        return tabsToPages.keySet().stream().filter(tab -> tab.getLabel().equals(searchKey)).findFirst().orElse(null);
    }

    private void hideAllPages(Collection<Component> pages){
        for(Component page : pages){
            hidePage(page);
        }
    }

    private void showPage(Component page){
        page.getElement().getStyle().set("display","flex");
    }

    private void hidePage(Component page){
        page.getElement().getStyle().set("display","none");
    }
}