Merge branch 'dev' into fix/3661-compute-graphs2

Author: T4rk1n

.github/CODEOWNERS

@@ -1,3 +1,3 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence
-* @T4rk1n @ndrezn @camdecoster
+* @T4rk1n @ndrezn @camdecoster @KoolADE85

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -275,6 +275,12 @@ const Dropdown = (props: DropdownProps) => {
             return;
         }
 
+        // Don't steal focus from the search input during search-driven
+        // re-renders (displayOptions changes while the user is typing).
+        if (document.activeElement === searchInputRef.current) {
+            return;
+        }
+
         requestAnimationFrame(() => {
             if (!multi) {
                 const selectedValue = sanitizedValues[0];

components/dash-core-components/src/utils/optionRendering.tsx

@@ -49,7 +49,7 @@ export const OptionLabel: React.FC<OptionLabelProps> = ({
                     <ExternalWrapper
                         key={i}
                         component={label}
-                        componentPath={[...ctx.componentPath, index, i]}
+                        componentPath={[...ctx.componentPath, String(value), i]}
                     />
                 ))}
             </>

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
@@ -730,3 +730,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", "yellow", "blue"]
+
+    assert dash_duo.get_logs() == []

components/dash-core-components/tests/integration/dropdown/test_clearable_false.py

@@ -190,8 +190,13 @@ 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"
 

components/dash-core-components/tests/integration/dropdown/test_search_value.py

@@ -1,3 +1,8 @@
+from time import sleep
+
+from selenium.webdriver.common.action_chains import ActionChains
+from selenium.webdriver.common.keys import Keys
+
 from dash import Dash, Input, Output, dcc, html
 
 
@@ -29,3 +34,76 @@ def update_output(search_value):
     dash_duo.wait_for_text_to_equal("#output", 'search_value="x"')
 
     assert dash_duo.get_logs() == []
+
+
+def test_ddsv002_search_filter_and_scroll(dash_duo):
+    """Search filters a virtualized dropdown, backspace restores all options,
+    then scroll to the bottom and select the last item."""
+    app = Dash(__name__)
+    options = [
+        {"label": f"Option {i + 1}", "value": f"opt_{i + 1}"} for i in range(100)
+    ]
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(id="dropdown", options=options, value="opt_1"),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(Output("output", "children"), Input("dropdown", "value"))
+    def update_output(value):
+        return f"value={value}"
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#output", "value=opt_1")
+
+    # Open the dropdown by clicking it
+    dash_duo.find_element("#dropdown").click()
+    dash_duo.wait_for_element(".dash-dropdown-options")
+
+    # Click the search field to focus it
+    search = dash_duo.find_element(".dash-dropdown-search")
+    search.click()
+
+    # Use ActionChains to type into the currently focused element,
+    # which will fail if focus is stolen from the search field.
+    def send_key(key):
+        ActionChains(dash_duo.driver).send_keys(key).perform()
+
+    # Type "100" one character at a time to filter down to "Option 100"
+    send_key("1")
+    sleep(0.2)
+    send_key("0")
+    sleep(0.2)
+    send_key("0")
+    sleep(0.2)
+
+    # Should have exactly one option visible: "Option 100"
+    visible_options = dash_duo.find_elements(".dash-dropdown-option")
+    assert len(visible_options) == 1
+    assert "Option 100" in visible_options[0].text
+
+    # Backspace three times to clear the search and restore all options
+    send_key(Keys.BACKSPACE)
+    sleep(0.2)
+    send_key(Keys.BACKSPACE)
+    sleep(0.2)
+    send_key(Keys.BACKSPACE)
+    sleep(0.2)
+
+    # Scroll to the bottom of the options list
+    options_container = dash_duo.find_element(".dash-dropdown-options")
+    dash_duo.driver.execute_script(
+        "arguments[0].querySelector('.dash-options-list-virtualized').scrollTop = "
+        "arguments[0].querySelector('.dash-options-list-virtualized').scrollHeight",
+        options_container,
+    )
+    sleep(0.3)
+
+    # Find and click the last option (Option 100)
+    all_options = dash_duo.find_elements(".dash-dropdown-option")
+    last_option = all_options[-1]
+    assert "Option 100" in last_option.text
+    last_option.click()
+
+    dash_duo.wait_for_text_to_equal("#output", "value=opt_100")

components/dash-html-components/package.json

@@ -58,6 +58,6 @@
     "/dash_html_components/*{.js,.map}"
   ],
   "browserslist": [
-    "last 10 years and not dead"
+    "last 11 years and not dead"
   ]
 }