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.')
And
# 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.