Multi-select dropdown options do not update correct when labels have HTML component in dash 4.0.0

Amazing work on dash 4.0.0!

I upgrade to Dash 4.0.0 today and find a bug(I think): When deselect option(s) in a multi-value dropdown whose label has html component, options update incorrectly.

Below is an example code.

from dash import Dash, dcc, html

app = Dash()
app.layout = html.Div([
    dcc.Dropdown(
        options=[
            {
                "label":html.Span("red"),
                "value": "red",
                "search": "red",
            },
            {
                "label":  html.Span("yellow"),
                "value": "yellow",
                "search": "yellow"
            },
            {
                "label":html.Span("blue"),
                "value": "blue",
                "search": "blue"
            },
        ],
        value=['red','yellow','blue'],
        id='close-on-select-dropdown', multi=True
    ),
    html.Div(id='close-on-select-output')
])


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

@Yunmeng
Thanks for reporting! I ran your sample app and could duplicate the issue. Would you like to open an issue on GitHub? GitHub · Where software is built

1 Like

Nice you can reproduce the bug.
I just reported the bug: [BUG] Multi-select dropdown options do not update correctly when labels have HTML component in dash 4.0.0 · Issue #3642 · plotly/dash

1 Like