initial tab content not rendering

[chriddyp]

In https://github.com/plotly/dash-docs/pull/152, I updated the version of dash-core-components to include the latest tab fixes. The issue with the 2nd tab loading by default instead of the 1st has been fixed 🎉 however it looks like there is a new issue with the tabs not loading their initial content.

See the first example here:

If I click through the tabs, then the content shows up:

[valentijnnieman]

@chriddyp That's odd - running the example by itself works fine, the content loads.

[T4rk1n]

I think I got the same issue but worse. My app is divided in 4 pages, each with a dcc.Tabs containing two tab (a graph and a table). All the dcc.Tabs are contained in a div with display: none at first, they are only displayed when clicking on a link.

When I click to see the first tabs, it shows the graph and table tabs but they have no props and changing tab doesn't do anything. If I go on the next page with the other tabs, they are not there at all.

[valentijnnieman]

@T4rk1n Any way you could give me a reproducible example? I'm having a hard time debugging this.

[T4rk1n]

Try this, it's similar to my app but this one loads the props after clicked. But the second set of tabs never show.

import dash

import dash_html_components as html
import dash_core_components as dcc
import dash_table_experiments as dte
from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

data = [
    {'id': 'one', 'value': 1},
    {'id': 'two', 'value': 2},
]


menu = html.Div([
    html.Div('one', id='one'),
    html.Div('two', id='two')
])

tabs_one = html.Div([
    dcc.Tabs([
        dcc.Tab(dcc.Graph(id='graph-one'), label='tab-one-one'),
        dcc.Tab(dte.DataTable(rows=[{}], id='table-one'), label='tab-one-two')
    ])
], id='tabs-one', style={'display': 'none'})

tabs_two = html.Div([
    dcc.Tabs([
        dcc.Tab(dcc.Graph(id='graph-two'), label='tab-two-one'),
        dcc.Tab(dte.DataTable(rows=[{}], id='table-two'), label='tab-two-two')
    ])
], id='tabs-two', style={'display': 'none'})


app.layout = html.Div([
    menu,
    tabs_one,
    tabs_two
])

for i in ('one', 'two'):

    @app.callback(Output('tabs-{}'.format(i), 'style'),
                  [Input(i, 'n_clicks')])
    def on_click(n_clicks):
        if n_clicks is None:
            raise PreventUpdate

        if n_clicks % 2 == 1:
            return {'display': 'block'}
        return {'display': 'none'}


    @app.callback(Output('table-{}'.format(i), 'rows'),
                  [Input(i, 'n_clicks')])
    def on_click(n_clicks):
        if n_clicks is None:
            raise PreventUpdate

        return [
            {'id': 'one', 'value': 1},
            {'id': 'two', 'value': 2},
        ]


    @app.callback(Output('graph-{}'.format(i), 'figure'),
                  [Input(i, 'n_clicks')])
    def on_click(n_clicks):
        if n_clicks is None:
            raise PreventUpdate

        return {
            'data': [
                {
                    'x': [1,2,3,4],
                    'y': [4,3,2,1]
                }
            ]
        }


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

[valentijnnieman]

@T4rk1n Thanks! I think I've found the issue. :-)

[valentijnnieman]

Published as 0.28.2