Navigating to different tabs by choosing an appropriate value from a dropdown

Dash Python
1

I have the following dashboard:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

search_list = ['Tab 1', 'Tab 2', 'Tab 3']

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            options=([{'label': i, 'value': i} for i in sorted(search_list)]),
            searchable=True,
            clearable=False,
            value='',
            placeholder='Select a sector, investment or investor...',
            id='search-dropdown'
        )
    ]),
    html.Div([
        dcc.Tabs(id="tabs", value='tab-1', children=[
            dcc.Tab(label='Tab one', value='tab-1', children=[
                html.H3('Tab content 1')
            ]),
            dcc.Tab(label='Tab two', value='tab-2', children=[
                html.H3('Tab content 2')
            ]),
            dcc.Tab(label='Tab three', value='tab-3', children=[
                html.H3('Tab content 3')
            ]),
        ]),
        html.Div(id='tabs-content')
    ])
])

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

I wonder if it’s possible to navigate to different tabs by choosing the appropriate value from the dropdown. For example, if I choose “Tab 2”, I want to be automatically taken to the second tab and see its content. I tried using the following callback but it doesn’t seem to work:

@app.callback(Output(component_id='tabs', component_property='value'),
              [Input(component_id='search-dropdown', component_property='value'),
               ])
def search_investment(selected_tab):
        if selected_tab == 'Tab 2':
            return 'investment'

Any ideas?

2

In principle, this should work. We’re tracking this issue here: https://github.com/plotly/dash-core-components/issues/271

3

Thanks. And will the issue be fixed any time soon?

4

Yeah, one potential fix was merged yesterday: https://github.com/plotly/dash-core-components/pull/267