Pre-select (and highlight) Tab based on URL

Dash Python
1

This is, I imagine, one of those that will be answered quickly, and it’s just my brain not working on a Friday afternoon…

I have a layout with a dcc.Tabs, with multiple tabs.
When the user selects a Tab, it gets highlighted (standard behaviour)

I also use a dcc.Location to record the currently selected tab in the URL. That way if someone reloads the browser page, the same selection is done.

That all works fine, apart from 1 thing: the tab is not highlighted when setting the tab from the URL.

      dcc.Tabs(id='tab_level_1',
                     value='',
                     style=dict(marginTop="20px"),
                     children=[
                         dcc.Tab(label='Encoding Performance',
                                 value='tab_performance'),
                         dcc.Tab(label='Ladder Spread Analysis',
                                 value='tab_ladder')
                     ]),
            html.Div(id='tab_level_1_content',
                     className='tab-content'),

@app.callback(
    [
        Output("tab_level_1_content", "children")
    ],
    [
        Input("tab_level_1", "value")
    ],
    [
        State('url', 'search')
    ]
)
def show_tab(selected_tab, current_url):
    if not selected_tab:
        url_handler = UrlHandler(current_url)
        url_tab = url_handler.get_tab()
        if url_tab:
            selected_tab = url_tab[0]
        else:
            selected_tab = 'tab_performance'

    if selected_tab == 'tab_performance':
        return [layouts.layout_tab_performance()]
    elif selected_tab == 'tab_ladder':
        return [layouts.layout_tab_ladder()]
    return [[]]

I obviously can’t add Output(‘tab_level_1’,‘value’) for the same function since it’s using the same component as an Input…

Any idea / workaround?