Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Tabs #273

Closed
roeap opened this issue Aug 22, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@roeap
Copy link

commented Aug 22, 2018

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

This comment has been minimized.

Copy link

commented Aug 22, 2018

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

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2018

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

@roeap

This comment has been minimized.

Copy link
Author

commented Aug 23, 2018

Great, thanks so much for the quick reply!

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.