I have a very basic two-page app: a header with links to the apps with a single textarea in each of them that load under the header.
# index.py from dash.dependencies import Input, Output import dash_core_components as dcc import dash_html_components as html from apps import extract_app, test_app from app import app # Header Menu header_layout = [ dcc.Location(id="url", refresh=False), html.Nav([dcc.Link("Extract", href="/extract"), html.Span(" | "), dcc.Link("Test", href="/test")], id="nav-bar", className="row") ] # Content app.layout = html.Div([ html.Div(header_layout, id='page-header'), html.Div(id='page-content') ]) @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/extract': return extract_app.layout elif pathname == '/test': return test_app.layout else: return test_app.layout if __name__ == '__main__': app.run_server(debug=True)
And two apps in the apps folder
# extract_app.py import dash_core_components as dcc layout = dcc.Textarea(id='extract-textarea', placeholder='Extract Placeholder.')
# test_app.py import dash_core_components as dcc layout = dcc.Textarea(id='test-textarea', placeholder='Test Placeholder.')
If you type some text in e.g. test_app test-textarea and use the menu dcc.Link to switch to extract_app, the text is automatically transferred to extract-textarea, which is not a desirable behavior for me. However, if I wrap one of the textareas in html.Div(), this doesn’t happen.
This is a very simplified version of a problem I am describing. For example if I have 100 spans (a custom core core component created using react, not html.Span) with custom class-names, and I dynamically replace these with another 100 spans using a callback, the old classNames are transferred to the new spans, in the exact same order, although the new spans are not supposed to have any classNames.
Is this related to caching? I would appreciate if someone could point towards the right direction.