how to preserve the same content after going back to a tab in Dash

I have multiple tabs in a Dash app where each tab has different information shown. Let's say I make some selections from a drop down menu on the first tab and create some charts. Then, I switch to another tab and come back to the first tab. My intention is to see the same information and charts on the first tab. I found similar questions, but no answer has been provided.

https://stackoverflow.com/questions/62386470/keep-values-dash-tab

https://stackoverflow.com/questions/56753040/how-to-save-the-content-of-a-tab-in-dash

https://community.plotly.com/t/how-to-preserve-last-state-in-tabs/14694

Here is a very simple dash app as a MWE.

import dash
from dash import html, dcc
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True)


myList = ['A', 'B']
myDict = {'A': [1,2,3],'B': [4,5,6] }

tab1 = html.Div([
    html.H3('Tab content 1'),
    dcc.Dropdown(
        id='first-dropdown-tab1',
        options=[{'label': l, 'value': l} for l in myList],
        value='A'
    ),
    dcc.Dropdown(
        id='second-dropdown-tab1',
        options=[{'label': i, 'value': i} for i in myDict['A']],
        value=1
    ),
])

tab2 = html.Div([
    html.H3('Tab content 2'),
    dcc.Dropdown(
        id='first-dropdown-tab2',
        options=[{'label': l, 'value': l} for l in myList],
        value='A'
    ),
    dcc.Dropdown(
        id='second-dropdown-tab2',
        options=[{'label': i, 'value': i} for i in myDict['A']],
        value=1
    ),
])

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1', children=[
        dcc.Tab(label='Tab One', value='tab-1'),
        dcc.Tab(label='Tab Two', value='tab-2'),
    ]),
    html.Div(id='tabs-content-example')
])

@app.callback(
    Output('tabs-content-example', 'children'),
    [Input('tabs-example', 'value')]
)
def render_content(tab):
    if tab == 'tab-1':
        return tab1
    elif tab == 'tab-2':
        return tab2

@app.callback(
    [Output('second-dropdown-tab1', 'options'),
     Output('second-dropdown-tab1', 'value')],
    [Input('first-dropdown-tab1', 'value')]
)
def update_dropdown_tab1(value):
    return [{'label': i, 'value': i} for i in myDict[value]], myDict[value][0]

@app.callback(
    [Output('second-dropdown-tab2', 'options'),
     Output('second-dropdown-tab2', 'value')],
    [Input('first-dropdown-tab2', 'value')]
)
def update_dropdown_tab2(value):
    return [{'label': i, 'value': i} for i in myDict[value]], myDict[value][0]

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

From my understanding, here is what's happening:

Each time you switch tabs, the displayed content is fully re-rendered, based on either the tab1 or the tab2 object. This is why you're always returning to the A-1 selection.

For each dropdown, you could use memory persistence to save the state of the component, so that when it's re-rendered it goes back to the last selected options/value.

However, with the two linked dropdowns that you have, you'll face another issue -> The second callback triggered by a changing value on the first dropdown will systematically update the second dropdown options/values, even if it was properly rendered with the persisted state.

Preserving the layout you have, the only solutions I can think of are pretty hacky. However, you can simply change the layout using Tab children to not trigger the whole chain I described above, and so to obtain the behavior you want.

app.layout = html.Div(
    [
        html.H1("Dash Tabs component demo"),
        dcc.Tabs(
            id="tabs-example",
            value="tab-1-example",
            children=[
                dcc.Tab(
                    id="tab-1", label="Tab One", value="tab-1-example", children=[tab1]
                ),
                dcc.Tab(
                    id="tab-2", label="Tab Two", value="tab-2-example", children=[tab2]
                ),
            ],
        ),
    ]
)

# You can remove this callback
# @app.callback(
#     dash.dependencies.Output("tabs-content-example", "children"),
#     [dash.dependencies.Input("tabs-example", "value")],
# )
# def render_content(tab):
#     if tab == "tab-1-example":
#         return tab1
#     elif tab == "tab-2-example":
#         return tab2