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

Bug related to tabs that contain different number of subtabs or subtabs with different values and IDs #272

Closed
delaleva opened this issue Aug 21, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@delaleva
Copy link

commented Aug 21, 2018

The first two example applications below demonstrate a problem with Tabs in Dash. When running these application, the subtabs in the first tab work as expected. However, the subtabs in the second tab can't be clicked and don't show any content. For some reason, this only works when the two tabs have the same number of tabs with the same IDs and the same values (as shown in the last example).

Content as tab children:


import dash
    import dash_html_components as html
    import dash_core_components as dcc

    app = dash.Dash()


    # Create a Dash layout
    app.layout = html.Div([
        html.Div(
            html.H1('My Dashboard')
        ),
        dcc.Tabs(id="tabs", value='Tab1', children=[
            dcc.Tab(label='Tab 1', id='tab1', value='Tab1', children =[

                dcc.Tabs(id="subtabs1", value='Subtab1', children=[
                    dcc.Tab(label='Sutab 1', id='subtab1', value='Subtab1'),
                    dcc.Tab(label='Sutab 2', id='subtab2', value='Subtab2'),
                ]),

            ]),
            dcc.Tab(label='Tab 2', id='tab2', value= 'Tab2', children=[

                dcc.Tabs(id="subtabs2", value='Subtab4', children=[
                    dcc.Tab(label='Sutab 4', id='subtab4', value='Subtab4'),
                    dcc.Tab(label='Sutab 5', id='subtab5', value='Subtab5'),
                ]),

            ])
        ])
    ])

    if __name__ == '__main__':
        app.run_server(debug=True)

Content as callbacks:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([
    html.Div(
        html.H1('My Dashboard')
    ),
    dcc.Tabs(id="tabs", value='Tab-1', children=[
        dcc.Tab(label='Tab 1', id='tab-1', value='Tab-1'),
        dcc.Tab(label='Tab 2', id='tab-2', value= 'Tab-2')

    ]),
    html.Div(id='tabs-content')
])

@app.callback(Output('tabs-content', 'children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'Tab-1':
        return html.Div([
            dcc.Tabs(id="subtabs-1", value='Subtab-1', children=[
                dcc.Tab(label='Subtab 1', id='subtab-1', value='Subtab-1'),
                dcc.Tab(label='Subtab 2', id='subtab-2', value='Subtab-2')
            ])
        ])
    elif tab == 'Tab-2':
        return html.Div([
            dcc.Tabs(id="subtabs-2", value='Subtab-3', children=[
                dcc.Tab(label='Tab 3', id='subtab-3', value='Subtab-3'),
                dcc.Tab(label='Tab 4', id='subtab-4', value='Subtab-4')
            ]),
        ])

if __name__ == '__main__':
    app.run_server(debug=True)

Tabs with identical subtabs:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([
    html.Div(
        html.H1('My Dashboard')
    ),
    dcc.Tabs(id="tabs", value='Tab-1', children=[
        dcc.Tab(label='Tab 1', id='tab-1', value='Tab-1'),
        dcc.Tab(label='Tab 2', id='tab-2', value= 'Tab-2')

    ]),
    html.Div(id='tabs-content')
])

@app.callback(Output('tabs-content', 'children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'Tab-1':
        return html.Div([
            dcc.Tabs(id="subtabs-1", value='Subtab-1', children=[
                dcc.Tab(label='Subtab 1', id='subtab-1', value='Subtab-1'),
                dcc.Tab(label='Subtab 2', id='subtab-2', value='Subtab-2')
            ])
        ])
    elif tab == 'Tab-2':
        return html.Div([
            dcc.Tabs(id="subtabs-1", value='Subtab-1', children=[
                dcc.Tab(label='Subtab 1', id='subtab-1', value='Subtab-1'),
                dcc.Tab(label='Subtab 2', id='subtab-2', value='Subtab-2')
            ])
        ])

if __name__ == '__main__':
    app.run_server(debug=True)

@delaleva delaleva changed the title Bug related to tabs and subtabs Tabs can't contain different number of subtabs and subtabs with different values and IDs Aug 21, 2018

@delaleva delaleva changed the title Tabs can't contain different number of subtabs and subtabs with different values and IDs Bug related to tabs that contain different number of subtabs or subtabs with different values and IDs Aug 21, 2018

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2018

Thank you for this detailed issue! It is definitely a bug on our end - we're working on a fix now. This issue definitely helps in finding a fix, so thanks again!

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2018

It looks like this issue will be fixed in #267 - we'll merge this soon as possible.

@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.

@delaleva

This comment has been minimized.

Copy link
Author

commented Aug 24, 2018

Awesome, thanks.

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.