✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
πŸ‡ Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Double click needed in Tabs

Hi

I would like to use the dcc.Tabs. Now, if i click once on the tab: the selected one will look like the selected one but if I want to show the layout of it, I have to click twice.

My code:

layout  = html.Div([
    html.H2('data-overview'),
    html.Div(id='data-overview-content')
])

@app.callback(
    Output('data-overview-content', 'children'),
    [Input('tabs_navbar', 'value'), Input('options_store', 'data')]
)
def load_template(tabs_navbar, data):
    if tabs_navbar != 'data-overview':
        raise PreventUpdate

    if data['template'] == 'images':
        return images.layout
    elif data['template'] == 'standard_no_time':
        return standard_no_time.layout

Based on the chosen template in the β€˜home’ tab, i want to render the right layout. How can I load the layout in one click and not double click? Is my approach wrong? It is an multipage app and every tab is another file.

Thanks in advance,

Kind regards,
Sarah