Multi-tab app : Unable to switch tabs / persist tab layout

Dash Python
1

I am facing issues when attempting to switch tabs in my dash application. The behavior is quite strange and I have been unable to pinpoint what’s going on. When I click a tab, the subtab.py file is called and the layout is rendered. However, it quickly reverts back to the previous tab. When I click the tab multiple times, it seems to persist. Really strange behavior. GIF below.

recordgif

Code below.

In my index.py file,

# App Layout
app.layout = html.Div([

    # header
    html.Div([

        dcc.Link(
            href=get_relative_path('/home'),
            children='Home'
        ),

        dcc.Link(
            href=get_relative_path('/archive'),
            children='Archive'
        ),

        dcc.Location(id='url'),

        html.Div(id='page-content', style={'margin-left': '2%'}),

        ],
        className="row header"
    )

])

# Render page content
@app.callback(Output("page-content", "children"),
              [
                Input('url', 'pathname')
              ]
             )
def display_content(pathname):

    if pathname == '/home':
        return home.layout

    elif pathname == '/archive':
        return archive.layout()

    else:
        return home.layout

home.py is where the tab layout/content is returned

layout =  html.Div([
            html.Div([

                dcc.Tabs(

                    id="tabs",
                    vertical=True,
                    className="mb-3",

                    children=[

                         dcc.Tab(label="Revenue", value="revenue_tab",
                                 children=[dcc.Tabs(id="subtabs",
                                    children=[
                                              dcc.Tab(label='Comps', value='subtab1'),
                                              dcc.Tab(label='Market', value='subtab2'),
                                              dcc.Tab(label='Leasing', value='subtab3')
                                    ],

                            )
                         ]),
                         dcc.Tab(label="Portfolio", value="portfolio_tab"),

                    ],
                    value="revenue_tab",
                 )

                ],

                className="row tabs_div"

            ),

            # Tab content
            html.Div(id="tab_content"),

])

# Render tabs/subtabs
@app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value"),
                  Input("subtabs", "value"),
              ],
             )
def render_content(tab, subtab):
    """
    For user selections, return the relevant tab
    """

    if tab == "portfolio_tab":
        return portfolio.layout

    if tab == "revenue_tab":

        if subtab == "comps_subtab":
            return comps.layout

        if subtab == "analysis_subtab":
            return analysis.layout

        if subtab == "lease_subtab":
            return deal.layout

    else:

        return (dash.no_update)