Nested Tabs

[roeap]

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.

[delaleva]

Hi, I reported the same issue yesterday and it seems like a bug.

[valentijnnieman]

Thank you for this detailed issue! We're working on getting a fix out for this bug as fast as possible. These issues really help in finding where the bug is located, so thanks again for your time, examples, and detailed explanations!

[valentijnnieman]

It looks like this issue is fixed in #267 which we plan to merge as soon as possible!

[roeap]

Great, thanks so much for the quick reply!

[valentijnnieman]

dash_core_components version 0.27.2 should now be released, which includes a fix.

[Georgepop]

You are the very best !
*** this sheat ! Yeah, just I wanted !