# Dropdown callback is called on tab change

**URL:** <https://community.plotly.com/t/dropdown-callback-is-called-on-tab-change/65845>\
**Category:** Dash Python\
**Created:** [July 7, 2022, 10:12am UTC](https://community.plotly.com/t/dropdown-callback-is-called-on-tab-change/65845 "2022-07-07T10:12:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![useradam\_123](https://avatars.discourse-cdn.com/v4/letter/u/b77776/32.png) [@useradam\_123](https://community.plotly.com/u/useradam_123)\
**Post date:** [July 7, 2022, 10:12am UTC](https://community.plotly.com/t/dropdown-callback-is-called-on-tab-change/65845/1 "2022-07-07T10:12:21Z")

</div>

Hello community! I have a multi tab page where i create the tabs dynamically:

```auto
def layout():
return html.Div([
        html.Div(id='hidden-div', style={'display':'none'}),
        dcc.Location(id='s_url', refresh=False),
        html.Div(
            dcc.Tabs(id='s_tabs',
                     vertical=True,
                     style={'height': '60vh',
                            'borderRight': 'thin lightgrey solid',
                            'textAlign': 'left'}),
            style={'width': '15%', 'float': 'left'}
        ),
        html.Div(
            html.Div(id='s_tab_output'),
            style={'width': '85%', 'float': 'right'}
        )
    ], style={
        'margin-left': 'auto',
        'margin-right': 'auto',
    })    

```

and i populate the tabs in a callback:

```auto
@dashapp.callback(
        [Output('s_tab_output', 'children'),
         Output('s_tabs', 'children')], 
        [Input('s_tabs', 'value')]
    )
    def render_tab(active_tab):
        tab_list = []
        for app in current_user.preferences.keys():
            tab_list.append(dcc.Tab(label = app.capitalize(), 
                                    value = app))
        
        if active_tab == 'tab1':
            tab_pane = _render_tab1()
        elif active_tab == 'tab2':
            tab_pane = _render_tab2()
        
        return tab_pane, tab_list

   def _render_tab1():
       my_list = ['a', 'b', 'c']
       return html.Div([
            html.Div(['Header'], style={'display': 'inline-block', 'verticalAlign': 'bottom', 'width': '10%'}),
            html.Div(['Some Text'], style={'display': 'inline-block', 'verticalAlign': 'bottom', 'width': '10%'}),
            html.Div([dcc.Dropdown(id={'type': 'dropdown', 'index': 'chart_1_dd'},
                                   searchable=True,
                                   options=[{'label': x,
                                             'value': x} for x in my_list],
                                   value=my_list[0])], 
                      style={'display': 'inline-block', 'verticalAlign': 'bottom', 'width': '20%'})])

```

what im trying to capture is when chart\_1\_dd changes value, so i set up a callback:

```auto
@dashapp.callback(
        Output({'type': 'dropdown', 'index': MATCH}, 'value'),
        Input({'type': 'dropdown', 'index': MATCH}, 'value'),
        [State({'type': 'dropdown', 'index': MATCH}, 'id'),
         State('s_tabs', 'value')],
        prevent_initial_update=True)
    def dropdown_changed(dd_value, dd_id, active_tab):
        print(dd_value)
        print(dd_id)
        print(active_tab)
        return dd_value

```

now my questions are two fold:

1. when the page loads, no tabs are active and I’d like to set the first tab in tab\_list, but i cant seem to figure that out
2. when tabs are selected (going from one to the next) the `dropdown_changed()` callback is always fired, even if the dropdown itself didn’t change (it was simply a tab refresh). why is that the case? I’d like the callback to be triggered only if the dropdown itself is actually changed.
3. prevent\_initial\_update doesn’t seem to work in this context.  
thanks-

---

<div class="post-metadata">

**Author:** ![yanboe](https://avatars.discourse-cdn.com/v4/letter/y/a6a055/32.png) [@yanboe](https://community.plotly.com/u/yanboe)\
**Post date:** [July 7, 2022, 4:35pm UTC](https://community.plotly.com/t/dropdown-callback-is-called-on-tab-change/65845/2 "2022-07-07T16:35:08Z")

</div>

I have an answer for your first question: Set the “value” property of dcc.Tabs to your desired initial tab. If you know the value of the dcc.Tab you want to set as default, hardcode it directly in your layout. If it’s dynamic, add it as an Output of your render\_tab callback, e.g. `Ouput('s_tabs', 'value')`

An example of the first solution (hardcoded) can be found in the docs (see Method 1): [Tabs | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-core-components/tabs)

---

<div class="post-metadata">

**Author:** ![useradam\_123](https://avatars.discourse-cdn.com/v4/letter/u/b77776/32.png) [@useradam\_123](https://community.plotly.com/u/useradam_123)\
**Post date:** [July 7, 2022, 6:37pm UTC](https://community.plotly.com/t/dropdown-callback-is-called-on-tab-change/65845/3 "2022-07-07T18:37:45Z")

</div>

great thank you, one down, 2 to go!