Problem with callbacks in different tabs

Dash Python
13

I wanted to include two codes snippets that generate two apps detailing the problems people have outlined above. The first app uses callbacks to generate tabs which works with no issues. The second app generates all the tabs in the app layout and when the callback is executed for the second tab, it takes the user back to the first tab.

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

app = dash.Dash()
app.config['suppress_callback_exceptions']=True

tab1_layout = [
    html.Div([
        html.H2("This is the default first tab page.")
    ])
]

tab2_layout = [
    html.Div([
        dcc.RadioItems(
            id='dropdown',
            options=[{'label': i, 'value': i} for i in range(3)],
            value=0,
        ),
        html.H2(id='header')
    ])
]

app.layout = html.Div([
    dcc.Tabs(id="tabs", value=1, children=[
        dcc.Tab(label='1', value=1),
        dcc.Tab(label='2', value=2)
    ]),
    html.Div(id='tab-output')
])

@app.callback(
    Output('tab-output', 'children'),
    [Input('tabs', 'value')]
)
def show_content(value):
    if value == 1:
        return tab1_layout
    elif value == 2:
        return tab2_layout

@app.callback(
    Output('header', 'children'),
    [Input('dropdown', 'value')])
def update_header(v):
    return 'The selected number is ' + str(v)

if __name__ == "__main__":
    app.run_server(debug=True, host='0.0.0.0', port=7000)

This is the second app:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

app = dash.Dash()
app.config['suppress_callback_exceptions']=True

tab1_layout = [
    html.Div([
        html.H2("This is the default first tab page.")
    ])
]

tab2_layout = [
    html.Div([
        dcc.RadioItems(
            id='dropdown',
            options=[{'label': i, 'value': i} for i in range(3)],
            value=0,
        ),
        html.H2(id='header')
    ])
]

app.layout = html.Div([
    dcc.Tabs(id="tabs", value=1, children=[
        dcc.Tab(label='1', value=1, children=tab1_layout),
        dcc.Tab(label='2', value=2, children=tab2_layout)
    ])
])

@app.callback(
    Output('header', 'children'),
    [Input('dropdown', 'value')])
def update_header(v):
    return 'The selected number is ' + str(v)

if __name__ == "__main__":
    app.run_server(debug=True, host='0.0.0.0', port=7000)

For a few of my apps, I want to prepopulate so this is an issue when I have callbacks in other tabs. Right now, I’m using callbacks to generate tabs avoiding this problem.