Skip to content

fix multiselect dropdown with components as labels#3643

Open
AnnMarieW wants to merge 2 commits intoplotly:devfrom
AnnMarieW:fix-multi-select-dropdown-with-components-as-labels
Open

fix multiselect dropdown with components as labels#3643
AnnMarieW wants to merge 2 commits intoplotly:devfrom
AnnMarieW:fix-multi-select-dropdown-with-components-as-labels

Conversation

@AnnMarieW
Copy link
Collaborator

closes #3642

This PR fixes the error in the second image below. In the sample app, it initially renders correctly, But after changing the selections it does not render correctly (in this case the yellow is deselected).

image

Updated:

image
from dash import Dash, dcc, html

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


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

@AnnMarieW
Copy link
Collaborator Author

Hi @KoolADE85
This fix break the feature of keeping the focus in the options after a selection. This test now fails: tests/integration/dropdown/test_a11y.py:205 test_a11y006_multi_select_keyboard_focus_retention

Any ideas how to fix it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Multi-select dropdown options do not update correctly when labels have HTML component in dash 4.0.0

1 participant