Tabs of Tabs has odd behavior

Dash Python
1

Hello

I have 2 sets of tabs: I have 10 that deal with uploaded data and another 8 that only deal with manually input data. To separate these I have 2 tabs, with each containing one of the two sets.

For the most part they seem to work fine. However the tab that is picked in the one set of tabs “carries over” to the other.

So for example if I look at tab 4 on the one set when I switch back to the other set of tabs it automatically selects the 4th tab on the other set. This wouldn’t be too much of an issue except that it results in users being able to access tabs that they shouldn’t be able to (namely sheets that should only be accessed after data is uploaded becomes available)

I would expect that the two different sets of tabs should have no effect on each other.

Is this a bug or do I need to do something for Dash to not to work in this way.

Many Thanks

2

@OliverBrace Thanks for reporting this. I think you’re running into a bug caused by incorrectly handled side-effect / detail of the React library we are using in browser. Am I right to assume that the nested dcc.Tabs do not have an id and that the dcc.Tab entries share value?

I’ve tried this which did not reproduce the issue:

app.layout = html.Div([
    dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(label='Tab one', children=[
            dcc.Tabs(value='tab-1-1', children=[dcc.Tab(
                label='tab-1-{}'.format(i),
                value='tab-1-{}'.format(i),
                children=[
                    html.Div('tab-1-{}-content'.format(i))
                ]
            ) for i in range(1, 5)])
        ]),
        dcc.Tab(label='Tab two', children=[
            dcc.Tabs(value='tab-1-1', children=[dcc.Tab(
                label='tab-2-{}'.format(i),
                value='tab-2-{}'.format(i),
                children=[
                    html.Div('tab-2-{}-content'.format(i))
                ]
            ) for i in range(1, 7)])
        ]),
    ]),
    html.Div(id='tabs-content')
])

When using the code above but making the dcc,Tab value the same across the dcc.Tabs, the issue appeared:
value='tab-1-{}'.format(i),

When adding an id to dcc.Tabs, the issue disappears once again:
dcc.Tabs(id='tabs-1', value='tab-1-1', children=[dcc.Tab(
dcc.Tabs(id='tabs-2', value='tab-1-1', children=[dcc.Tab(

Opened an issue in dash-core-components for it here: https://github.com/plotly/dash-core-components/issues/460.

In the meanwhile, the workaround is either make sure to use an id on the dcc.Tabs or to not reuse the dcc.Tab values across various nested tabs.

Hope this helps!

1 Like
3

Problem solved. You`re awesome.
Thanks