Black Lives Matter. Please consider donating to Black Girls Code today.

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

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([
            options=([{'label': i, 'value': i} for i in sorted(search_list)]),
            placeholder='Select a sector, investment or investor...',
        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')

if __name__ == '__main__':

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?

In principle, this should work. We’re tracking this issue here:

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

Yeah, one potential fix was merged yesterday: