Tab body not showing after update

Dash Python
1

I am using dbc.Tabs and the tabs display fine until I update the contents on one of them. Then the tab body closes with none of the tabs selected. I can open the tab by simply selecting it again. Is there a way to make the tab selected and open after the update? Here is an extremely simplified case. To reproduce, run the app, select version2.

#!/usr/bin/env python3
"""Minimal dash program."""

from dash import callback, Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([dcc.Location(id='url'),
                            dbc.Card([dbc.CardBody([html.Div(id='page-content')])]),
                            dcc.Store(id='version-store', storage_type='local')])


@callback(Output('version-store', 'data'),
          Input('version-dd', 'value'),
          prevent_initial_call=True)
def update_store(version):
    return version

@callback(Output('page-content', 'children'),
          Input('url', 'pathname'),
          Input('version-store', 'data'))
def render_page_content(pathname, version):
    chooser = [dbc.Row([html.Div(children='version', id='view-hist-version')]),
               dbc.Row([dbc.Col(dcc.Dropdown(id='version-dd',
                                             options=['version1', 'version2'],
                                             value='version1'),
                                width={'size': 2})])]

    return dbc.Card([dbc.CardBody([dbc.Tabs([dbc.Tab(dbc.Card(dbc.CardBody(chooser)), label='Tab')])])])

if __name__ == '__main__':
    app.run_server(debug=True)
3

HI @Brent you have to give the tab a tab_id and set this ID to active_tab:

    return dbc.Card(
        [
            dbc.CardBody(
                [
                    dbc.Tabs(
                        [
                            dbc.Tab(
                                dbc.Card(
                                    dbc.CardBody(chooser)
                                ),
                                tab_id="your_tab",
                                label='Tab'
                            )
                        ],
                        active_tab="your_tab"
                    )
                ]
            )
        ]
    )

Not sure why, though. Extract of the dbc docs:

active_tab (string ; optional): The tab_id of the currently active tab. If tab_id has not been specified for the active tab, this will default to tab-i, where i is the index (starting from 0) of the tab.

4

Thank you. That indeed does work. I was getting hung up on the fact that I did not have to declare an active tab for it to work the first time and like the documentation says it should not be necessary for what I want it to do.

1 Like