diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx index 8338d03689..8fd163bfe9 100644 --- a/components/dash-core-components/src/fragments/Dropdown.tsx +++ b/components/dash-core-components/src/fragments/Dropdown.tsx @@ -233,7 +233,7 @@ const Dropdown = (props: DropdownProps) => { setDisplayOptions(sortedOptions); } - }, [filteredOptions, isOpen]); + }, [filteredOptions, isOpen, sanitizedValues]); // Focus first selected item or search input when dropdown opens useEffect(() => { diff --git a/components/dash-core-components/tests/integration/dropdown/test_a11y.py b/components/dash-core-components/tests/integration/dropdown/test_a11y.py index d547390ca4..a581558d11 100644 --- a/components/dash-core-components/tests/integration/dropdown/test_a11y.py +++ b/components/dash-core-components/tests/integration/dropdown/test_a11y.py @@ -1,7 +1,7 @@ import pytest from dash import Dash, Input, Output from dash.dcc import Dropdown -from dash.html import Div, Label, P +from dash.html import Div, Label, P, Span from selenium.common.exceptions import TimeoutException from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.action_chains import ActionChains @@ -434,3 +434,40 @@ def is_visible(el): ) return all([is_visible(el) for el in elements]) + + +def test_a11y009_dropdown_component_labels_render_correctly(dash_duo): + app = Dash(__name__) + app.layout = Div( + [ + Dropdown( + options=[ + {"label": Span("red"), "value": "red"}, + {"label": Span("yellow"), "value": "yellow"}, + {"label": Span("blue"), "value": "blue"}, + ], + value=["red", "yellow", "blue"], + id="components-label-dropdown", + multi=True, + ), + ] + ) + + dash_duo.start_server(app) + + dash_duo.find_element("#components-label-dropdown").click() + dash_duo.wait_for_element(".dash-dropdown-options") + + # Click on the "yellow" option + yellow_option = dash_duo.find_element( + '.dash-dropdown-option:has(input[value="yellow"])' + ) + yellow_option.click() + + # After interaction, verify the options render correctly + option_elements = dash_duo.find_elements(".dash-dropdown-option") + rendered_labels = [el.text.strip() for el in option_elements] + + assert rendered_labels == ["red", "blue", "yellow"] + + assert dash_duo.get_logs() == [] diff --git a/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py b/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py index 7d2e3bbcc1..7681de98fe 100644 --- a/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py +++ b/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py @@ -190,8 +190,17 @@ def update_value(val): # Attempt to deselect all items. Everything should deselect until we get to # the last item which cannot be cleared. - selected = dash_duo.find_elements(".dash-dropdown-options input[checked]") - [el.click() for el in selected] + # Click MTL option container + mtl_option = dash_duo.find_element( + '.dash-dropdown-option:has(input[value="MTL"])' + ) + mtl_option.click() + + # Click SF option container + sf_option = dash_duo.find_element( + '.dash-dropdown-option:has(input[value="SF"])' + ) + sf_option.click() assert dash_duo.find_element("#dropdown-value").text == "SF"