Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

issue updating tabs dynamically? #265

Closed
chriddyp opened this issue Aug 16, 2018 · 5 comments · Fixed by #267
Closed

issue updating tabs dynamically? #265

chriddyp opened this issue Aug 16, 2018 · 5 comments · Fixed by #267

Comments

@chriddyp
Copy link
Member

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
Copy link
Contributor

valentijnnieman commented Aug 16, 2018

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
Copy link

radekwlsk commented Aug 17, 2018

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 (react-dom@15.4.2.min.js?v=0.13.2:13)
    at p._renderValidatedComponent (react-dom@15.4.2.min.js?v=0.13.2:13)
    at p._updateRenderedComponent (react-dom@15.4.2.min.js?v=0.13.2:13)
    at p._performComponentUpdate (react-dom@15.4.2.min.js?v=0.13.2:13)
    at p.updateComponent (react-dom@15.4.2.min.js?v=0.13.2:13)
    at p.receiveComponent (react-dom@15.4.2.min.js?v=0.13.2:13)
    at Object.receiveComponent (react-dom@15.4.2.min.js?v=0.13.2:14)
    at p._updateRenderedComponent (react-dom@15.4.2.min.js?v=0.13.2:13)
    at p._performComponentUpdate (react-dom@15.4.2.min.js?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
Copy link

@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
Copy link
Member Author

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
Copy link
Contributor

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants