[BUG] Version 3.0.0rc3 - Default Dropdown Value Bug

[xiforivia]

When selecting another option from the dropdown that is not the default option, it changes normally, but when returning to the default option, it does not switch back to it.
It is possible to see in the video that "Tratar + Ignorar" was the default option and after I change that, I can't switch back to it.

bug_dropdown.mp4

Code:

dbc.Label("Escolha o Tratamento de inviabilidades", className="d-flex justify-content-center", style={"color": "#002f4a", "font-weight": "bold"}),
dcc.Dropdown(
id='inviabilidade-estudo',
options=[
{"label": "Tratar inviabilidades", "value": 1},
{"label": "Ignorar inviabilidades", "value": 2},
{"label": "Tratar + Ignorar", "value": 3},
{"label": "Tratamento True", "value": 4}
],
value=3
)

Versions:
dash==3.0.0rc3
dash-bootstrap-components==2.0.0b2
dash-breakpoints==0.1.0
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
dash-ag-grid==31.3.1rc1
dash_auth==2.3.0
dash-mantine-components==0.12.1

[xiforivia]

This was fixed in version rc4 but now I saw another bug with dropdown, when there are differents dbc.Tabs, and each one of them has a dropdown with same ID. When you choose one option in one Tab and then you change to the other Tab you can't change the option anymore at the new Tab. This used to work at dash 2.x.x.
Sometimes appears the error: Cannot read properties of undefined (reading 'props')

[BSd3v]

Hello @xiforivia,

What happens if you run 3.0.2?

[xiforivia]

Hello @BSd3v , In version 3.0.2 stills the same problem. I update the versions, but the problem remains:

dash==3.0.2
dash-bootstrap-components==2.0.0
dash-breakpoints==0.1.0
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
dash-ag-grid==31.3.1
dash_auth==2.3.0
dash-mantine-components==0.12.1

[BSd3v]

This seems to work for dcc.Tabs, check it out here:

from dash import Dash, dcc, html, Input, Output,callback

dropdown = dcc.Dropdown(options=[
    {"label": "Tratar inviabilidades", "value": 1},
    {"label": "Ignorar inviabilidades", "value": 2},
    {"label": "Tratar + Ignorar", "value": 3},
    {"label": "Tratamento True", "value": 4}
    ],
    value=3, id='demo-dropdown')

app = Dash()
app.layout = html.Div([
    dcc.Tabs([
        dcc.Tab(children=dropdown,label='1', value='1'),
        dcc.Tab(children=dropdown, label='2', value='2')
        ]),
    html.Div(id='dd-output-container')
])


@callback(
    Output('dd-output-container', 'children'),
    Input('demo-dropdown', 'value')
)
def update_output(value):
    return f'You have selected {value}'


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

If this is working and you cant get it to work on yours, please post the code to troubleshoot the issue more.

[xiforivia]

@BSd3v, your code works here as well. Here is a code that doesn't work:

from dash import Dash, dcc, html, Input, Output,callback
import dash_bootstrap_components as dbc


app = Dash()
app.layout = dbc.Card([
            dbc.CardHeader(
                dbc.Tabs([
                    dbc.Tab(tab_id='1',label='1'),
                    dbc.Tab(tab_id='2', label='2'),
                    dbc.Tab(tab_id='3', label='3')
                    ],
                    id='card-tabs'),
                ),
            dbc.Container(
                        id='container-main',
                        children=[
                            html.Div(id='dd-output-container'),
                            dbc.Row([
                            dbc.Col(
                                id='row-main',
                                children=[],
                                width=12
                            ),
                            ], className='d-flex justify-content-center'),
                        ],
            )
        ])

@callback(
        Output("row-main", "children"), 
        Input("card-tabs", "active_tab")
    )
    def tab_content(aba):
        if aba == '1': 
            retorno = [
                dbc.Label("Escolha o modo de execução", className="d-flex justify-content-center", style={"color": "#002f4a", "font-weight": "bold"}),
                dcc.Dropdown(
                    id='execucao-estudo',
                    options=[
                        {"label": "Padrão", "value": 0},
                        {"label": "Consistência", "value": 1},
                        {"label": "Consistência + Padrão", "value": 2},
                    ],
                    value=0
                ),                                                 
            ]

        if aba == '2':
            retorno = [
                dbc.Label("Escolha a Máquina", className="d-flex justify-content-center", style={"color": "#002f4a", "font-weight": "bold"}),
                dcc.Dropdown(
                    id='maquina-estudo',
                    options=[{"label": html.Span([i.split('|')[0]], style={'color': i.split('|')[1], 'font-size': 15}), "value": x} for i, x in {'Econômica|Blue': 'economica', 'Super Econômica|Green': 'super_economica'}.items()],
                    value='economica'
                ),
                dbc.Label("Escolha o modo de execução", className="d-flex justify-content-center", style={"color": "#002f4a", "font-weight": "bold"}),
                dcc.Dropdown(
                    id='execucao-estudo',
                    options=[
                        {"label": "Padrão", "value": 0},
                        {"label": "Consistência", "value": 1},
                        {"label": "Consistência + Padrão", "value": 2},
                    ],
                    value=0
                ),                                                                
            ]
        if aba == '3':
            retorno = []
        return retorno

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

[BSd3v]

If you place the id in the same exact location in the children, it works, but if you are altering, then path isnt the same and it stops listening to updates (that's my guess)

---

Removing the component completely and readding in the different location also works.

[xiforivia]

I think you're right, thank you for unravelig the mistery, the sad part is that used to work :(

[BSd3v]

Hello @xiforivia,

This should be fixed in the next release.

[tecnologia-true]

Hello @BSd3v, I was just testing the new release v3.0.3 and still not works good. In the last code that I sent, when I try to change from "Econômica" to "Super Econômica" in the second tab doesn't change.

dash==3.0.3
dash-bootstrap-components==2.0.1
dash-breakpoints==0.1.0
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
dash-ag-grid==31.3.1
dash_auth==2.3.0
dash-mantine-components==0.12.1

[BSd3v]

Correct, these are two separate components, they are at different paths, as such they listen to different updates. (outside of callbacks that target the id).

The difference is now that each will respond to its own adjustments.

---

If you want to keep the save value across the tabs, you can implement persistence=True

[xiforivia]

I think the problem maybe is related to what was said in issue #3286 because the problem now is in the dropdown that uses html.Span

[BSd3v]

I doubt that that is related, I just built from the code and without passing persistance=True the dropdown doesnt persist between tabs...

[xiforivia]

I think the problem maybe is related to what was said in issue #3286 because the problem now is in the dropdown that uses html.Span

Now in 3.0.4 it's working!