issue updating tabs dynamically?

[chriddyp]

I haven't triaged this one, but this was reported by a community user: https://community.plot.ly/t/problem-creating-tabs-dynamically-using-callback/12728/4. We should make sure that the two methods that I listed do indeed work!

[valentijnnieman]

I've confirmed that:

• Update the children property of some div with an entirely new dcc.Tabs instance

Example code

# -*- coding: utf-8 -*-
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(id='tabs-bar', style={'backgroundColor': 'hotpink'}),
    dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(label='Tab one', value='tab-1'),
        dcc.Tab(label='Tab two', value='tab-2'),
    ]),
    dcc.Dropdown(id='page-select', options=[{'label': '1', 'value': 'page-1'}]),
    html.Div(id='tabs-content')
])

@app.callback(Output('tabs-bar', 'children'),
                [Input('page-select', 'value')])
def render_page(page):
    if page == 'page-1':
        return dcc.Tabs(id="page-one-tabs", children=[
            dcc.Tab(label='Page one - Tab one', value='tab-1'),
            dcc.Tab(label='Page one - Tab two', value='tab-2'),
        ]),
    else: 
        return dcc.Tabs(id="initial-tabs", children=[
            dcc.Tab(label='Initial Tab one', value='tab-1'),
            dcc.Tab(label='Initial Tab two', value='tab-2'),
        ]),

@app.callback(Output('tabs-content', 'children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ])


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

Works!

Getting

• Update the children property of a dcc.Tabs component with a new list of dcc.Tab instances.
  to work is a bit trickier - the dcc.Tabs component can't have it's children undefined it seems!

[radekwlsk]

For me when I generate children of a html.Div, that have multiple dcc.Tabs, dynamically with callback for each (dynamic tabs) and then try to change the children of that container html.Div it fails to replace it, throwing in front:

Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
    at t.value (bundle.js?v=0.27.1:27)
    at p._renderValidatedComponentWithoutOwnerOrContext ([email protected]?v=0.13.2:13)
    at p._renderValidatedComponent ([email protected]?v=0.13.2:13)
    at p._updateRenderedComponent ([email protected]?v=0.13.2:13)
    at p._performComponentUpdate ([email protected]?v=0.13.2:13)
    at p.updateComponent ([email protected]?v=0.13.2:13)
    at p.receiveComponent ([email protected]?v=0.13.2:13)
    at Object.receiveComponent ([email protected]?v=0.13.2:14)
    at p._updateRenderedComponent ([email protected]?v=0.13.2:13)
    at p._performComponentUpdate ([email protected]?v=0.13.2:13)

For me it looks like the callback for dynamic tab content of the already removed dcc.Tabs is called and it fails, as there is not dcc.Tabs to have value for that callback.

If the callback returns more dcc.Tabs than there was (adding some) then there is no problem, error is only thrown when some of the dcc.Tabs are missing in new children of the container.

[radekwlsk]

@chriddyp doesn't #267 resolve the issues? What is stopping merge of those fixes? That issue really stops my Dash application development. Can I help in any way?

[chriddyp]

That issue really stops my Dash application development

In the meantime, can you use the other method for Tabs, that is, rendering the children through a callback? Method 1 here: https://dash.plot.ly/dash-core-components/tabs

[valentijnnieman]

@radekwlsk #267 is merged and published as version 0.27.2!