fix multiselect dropdown with components as labels

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(() => {

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() == []

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"