Nested Tabs #273
Description
I have come across a behavior of the tabs component I can’t quite make sense of. A minimal example code is provided below.
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
dcc.Tabs(
id='tabs-1',
value='tab-1',
children=[
dcc.Tab(
label='Tab 1',
value='tab-1',
children=[
html.Div("Content 1"),
dcc.Tabs(
id='tabs-2',
value='tab-1-1',
children=[
dcc.Tab(label='Tab 1-1', value='tab-1-1', children=["Content 1-1"]),
dcc.Tab(label='Tab 1-2', value='tab-1-2', children=["Content 1-2"])
]
)
]
),
dcc.Tab(
label='Tab 2',
value='tab-2',
children=[
html.Div("Content 2"),
dcc.Tabs(
id='tabs-3',
value='tab-2-1',
children=[
dcc.Tab(label='Tab 2-1', value='tab-2-1', children=["Content 2-1"]),
dcc.Tab(label='Tab 2-2', value='tab-2-2', children=["Content 2-2"])
]
)
]
),
dcc.Tab(label='Tab 3', value='tab-3', children=["Content 3"])
]
)
])
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
if __name__ == '__main__':
app.run_server(debug=True)
The main tab component hast three tabs, two of which contain tabs components of their own and some other content. When starting the app, the first tab works as expected. Switching to the second tab. The content of the second tab is displayed, but the tabs component is not updated. The behavior can be “reset” by switching to the third tab. The content of the tab which is selected next (either tab 1 or tab 2) is displayed correctly, but then the behavior returns when switching between tabs 1 or 2. To mitigate this, one can either remove ONE of the contents html.Div("Content 1"), or html.Div("Content 2"), or wrap either one of the sub-level tabs components in an additional Div. In these cases, it only works if the structure in tab 1 and tab 2 is not “parallel”, meaning if both tab contents are removed, or both Tabs components are wrapped in a div, the behavior returns. Due to the dependence on the html structure, I was wondering, if this has anything to do with the handling of callbacks in React, but since I have literally never worked with that, I am just guessing…
However, even when the example works, the selection state of the second level tabs is not retained, as I would have expected. I seemed to remember a comment somewhere, that states, the Tabs component controls visibility, but renders (right word here?) all contents at once.
Any insights on this is greatly appreciated.