TabSheet does not update content visibility, when tab is hidden

[stefanuebe]

Description

We have a use case, where the tabs of a tab sheet can change their visibility based on outer circumstances. However, the tabsheet does not care properly about hidden tabs. There are multiple scenarios, where the tabsheet behaves incorrect:

1. hiding all tabs
   When the tabs are hidden initially (all set to visible false) the tabsheet stays "empty", showing only the separator and the tab content loading spinner.

All tabs are hidden, only the spinner is shown

2. hiding all tabs / the current selected tab during use time
   Hiding all tabs after a certain tab has been selected leads to a similar behavior as 1) with the difference that the content of the current tab is still shown. Same when only the currently selected tab is hidden.

Tab 2 has been hidden, its content is till shown. No other tab gets auto selected

Expected outcome

When the last visible tab is hidden, the whole tabsheet should be made invisible. When at least one tab is made visible again, the tabsheet itself should automatically update its own visibility. To not messup the server state, this "hidden due to hidden children" should be set on the client only, e.g. with the "hidden" attribute.

When the current selected tab is hidden, but others are still visible, the tabsheet should autoselect another tab. Since there might be different expectations of which tab should be autoselected, the tabsheet could provide one of the following:

• either some "autoselect strategy" (e.g. "first tab", "last tab", "previous tab", "following tab"), on which depending the new selected tab is choosen
• or the dev can provide a function. that function receives the hidden tab index and returns the tab index to be selected (or alternatively the tab objects themselves, but getting the tab from the index is easier then vice versa?)

Minimal reproducible example

This sample hides the tabs initially. The "switch" button shows/hides tab 2. Modify the initial setVisibles to also reproduce the other scenario.

@Route(value = "")
public class TestView extends VerticalLayout {

    public TestView() {
        TabSheet tabSheet = new TabSheet();
        Tab tab1 = addTab(tabSheet);
        Tab tab2 = addTab(tabSheet);
        Tab tab3 = addTab(tabSheet);

        tab1.setVisible(false);
        tab2.setVisible(false);
        tab3.setVisible(false);

        add(new Button("Switch", event -> {
            tab2.setVisible(!tab2.isVisible());
        }), tabSheet);

    }

    private static Tab addTab(TabSheet tabSheet) {
        int nr = tabSheet.getTabCount() + 1;
        return tabSheet.add("Tab " + nr, new Span("Content of Tab " + nr));
    }
}

Steps to reproduce

1. Add the snippet and open the view
2. You'll see the empty tabsheet with the spinner
3. Click switch multiple times to see the issue with the non hiden content

Environment

Vaadin version(s): 24.6.4

Browsers

No response

[TatuLund]

As a workaround you can hide the spinner with CSS. Add class name "empty" to the TabSheet using tabSheet.addClassName("empty") when the last tab is removed.

https://vaadin.com/docs/latest/components/tabs/styling

vaadin-tabsheet.empty::part(loader) {
  display: none;
}