[BUG] dbc Tabs not showing default first tab anymore with Dash 4.2.0 and higher

[ghaarsma]

For any Dash version > 4.1.0, the dash-bootstrap-components (dbc) Tabs do not show the default 1st tab anymore.

With dash==4.1.0 and dash-bootstrap-components==2.0.4

With dash==4.4.1 and dash-bootstrap-components==2.0.4

With the following trivial example:

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, title="Dash Tab Test", external_stylesheets=[dbc.themes.BOOTSTRAP])

children = [dbc.Tab(html.H2(f"Test Tab {i}"), label=f"Tab {i}") for i in range(3)]

app.layout = (
    html.Div(
        [
            dbc.Tabs(children=children)
        ]
    ),
)


if __name__ == "__main__":
    app.run(debug=True)

Note: if you switch on the tabs back and forth, the tab contents appear again. It's just the first tab does not show up anymore by default. See also dbc documentation.

[AnnMarieW]

@ghaarsma Thanks for reporting and the good write-up!

There's a new PR to fix the issue (thanks @BSd3v). There are a few related issues that are being looked at as well, so if there's a delay before the fix is merged, a workaround is to give each Tab a tab_id and setting the initial tab to render in the active_tab prop on Tabs:

     dbc.Tabs(
            [
                dbc.Tab(label="Tab 1", tab_id="tab-1"),
                dbc.Tab(label="Tab 2", tab_id="tab-2"),
            ],
            id="tabs",
            active_tab="tab-1",
        )