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

issue updating tabs dynamically? #265

Closed
chriddyp opened this issue Aug 16, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@chriddyp
Copy link
Member

commented Aug 16, 2018

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 21, 2018

@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

This comment has been minimized.

Copy link
Member Author

commented Aug 21, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2018

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

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.