[BUG] dcc.Dropdown does not update when using components as option labels

[ckrivik]

This example from the docs no longer works after upgrading to Dash 3: https://dash.plotly.com/dash-core-components/dropdown#components-as-option-labels

dcc.Dropdown previously accepted components as labels in Dash 2. After upgrading to Dash 3, Dropdown does not update visually when a new value is selected if using components as option labels. Callbacks will fire and the value is correctly changed under the hood, component just doesn't update visually. Dropdown works properly when using strings as option labels.

confirmed not working on:

• Win11/Chrome/Python 3.9/Dash 3.0.2
• Mac/Firefox/Python 3.12/Dash 3.0.3

main.py:

from dash import Dash, html, dcc

app = Dash()

app.layout = [
    html.H1(children='Dash Bug', style={'textAlign':'center'}),
    # dcc.Dropdown does not visually update when user selects option when using components as labels
    dcc.Dropdown(
        [
            {"label": html.Span("Python"), "value": "Python"},
            {"label": html.Span("Julia"), "value": "Julia"},
            {"label": html.Span("R"), "value": "R"},
        ],
        value="Python"
    ),
    # works just fine with plain strings though
    dcc.Dropdown(
        [
            {"label": "Python", "value": "Python"},
            {"label": "Julia", "value": "Julia"},
            {"label": "R", "value": "R"},
        ],
        value="Python"
    )
]

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

[gvwilson]

@LiamConnors @T4rk1n does this require a code fix or an update to documentation?

[T4rk1n]

Fixed by #3284, the component as props were sharing same key and not re-rendered.