Fix keyboard quirks in certain edge cases with dropdown component

KoolADE85 · KoolADE85 · commit 2f8a7384be7f · 2025-12-11T12:24:39.000-07:00
diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -283,7 +283,7 @@ const Dropdown = (props: DropdownProps) => {
         // Don't interfere with the event if the user is using Home/End keys on the search input
         if (
             ['Home', 'End'].includes(e.key) &&
-            document.activeElement instanceof HTMLInputElement
+            document.activeElement === searchInputRef.current
         ) {
             return;
         }
@@ -367,6 +367,7 @@ const Dropdown = (props: DropdownProps) => {
 
     const accessibleId = id ?? uuid();
     const positioningContainerRef = useRef<HTMLDivElement>(null);
+    const canClearValues = clearable && !disabled && !!sanitizedValues.length;
 
     const popover = (
         <Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
@@ -377,10 +378,20 @@ const Dropdown = (props: DropdownProps) => {
                     disabled={disabled}
                     type="button"
                     onKeyDown={e => {
-                        if (e.key === 'ArrowDown') {
+                        if (['ArrowDown', 'Enter'].includes(e.key)) {
                             e.preventDefault();
+                        }
+                    }}
+                    onKeyUp={e => {
+                        if (['ArrowDown', 'Enter'].includes(e.key)) {
                             setIsOpen(true);
                         }
+                        if (
+                            ['Delete', 'Backspace'].includes(e.key) &&
+                            canClearValues
+                        ) {
+                            handleClear();
+                        }
                     }}
                     className={`dash-dropdown ${className ?? ''}`}
                     style={style}
@@ -417,7 +428,7 @@ const Dropdown = (props: DropdownProps) => {
                                 )}
                             </span>
                         )}
-                        {clearable && !disabled && !!sanitizedValues.length && (
+                        {canClearValues && (
                             <a
                                 className="dash-dropdown-clear"
                                 onClick={e => {
diff --git a/components/dash-core-components/tests/integration/dropdown/test_a11y.py b/components/dash-core-components/tests/integration/dropdown/test_a11y.py
@@ -83,7 +83,7 @@ def send_keys(key):
     dash_duo.start_server(app)
 
     dropdown = dash_duo.find_element("#dropdown")
-    dropdown.click()
+    dropdown.send_keys(Keys.ENTER)  # Open with Enter key
     dash_duo.wait_for_element(".dash-dropdown-options")
 
     send_keys(
@@ -237,14 +237,17 @@ def update_output(value):
 
     # Select 3 items by alternating ArrowDown and Spacebar
     send_keys(Keys.ARROW_DOWN)  # Move to first option
+    sleep(0.05)
     send_keys(Keys.SPACE)  # Select Option 0
     dash_duo.wait_for_text_to_equal("#output", "Selected: ['Option 0']")
 
     send_keys(Keys.ARROW_DOWN)  # Move to second option
+    sleep(0.05)
     send_keys(Keys.SPACE)  # Select Option 1
     dash_duo.wait_for_text_to_equal("#output", "Selected: ['Option 0', 'Option 1']")
 
     send_keys(Keys.ARROW_DOWN)  # Move to third option
+    sleep(0.05)
     send_keys(Keys.SPACE)  # Select Option 2
     dash_duo.wait_for_text_to_equal(
         "#output", "Selected: ['Option 0', 'Option 1', 'Option 2']"
@@ -253,6 +256,164 @@ def update_output(value):
     assert dash_duo.get_logs() == []
 
 
+def test_a11y007_opens_and_closes_without_races(dash_duo):
+    def send_keys(key):
+        actions = ActionChains(dash_duo.driver)
+        actions.send_keys(key)
+        actions.perform()
+
+    app = Dash(__name__)
+    app.layout = Div(
+        [
+            Dropdown(
+                id="dropdown",
+                options=[f"Option {i}" for i in range(0, 10)],
+                value="Option 5",
+                multi=False,
+            ),
+            Div(id="output"),
+        ]
+    )
+
+    def assert_focus_in_dropdown():
+        # Verify focus is inside the dropdown
+        assert dash_duo.driver.execute_script(
+            """
+            const activeElement = document.activeElement;
+            const dropdownContent = document.querySelector('.dash-dropdown-content');
+            return dropdownContent && dropdownContent.contains(activeElement);
+            """
+        ), "Focus must be inside the dropdown when it opens"
+
+    @app.callback(
+        Output("output", "children"),
+        Input("dropdown", "value"),
+    )
+    def update_output(value):
+        return f"Selected: {value}"
+
+    dash_duo.start_server(app)
+
+    # Verify initial value is set
+    dash_duo.wait_for_text_to_equal("#output", "Selected: Option 5")
+
+    dropdown = dash_duo.find_element("#dropdown")
+
+    # Test repeated open/close to confirm no race conditions or side effects
+    for i in range(3):
+        # Open with Enter
+        dropdown.send_keys(Keys.ENTER)
+        dash_duo.wait_for_element(".dash-dropdown-options")
+        assert_focus_in_dropdown()
+
+        # Verify the value is still "Option 5" (not cleared)
+        dash_duo.wait_for_text_to_equal("#output", "Selected: Option 5")
+
+        # Close with Escape
+        send_keys(Keys.ESCAPE)
+        sleep(0.1)
+
+        # Verify the value is still "Option 5"
+        dash_duo.wait_for_text_to_equal("#output", "Selected: Option 5")
+
+    for i in range(3):
+        # Open with mouse
+        dropdown.click()
+        dash_duo.wait_for_element(".dash-dropdown-options")
+        assert_focus_in_dropdown()
+
+        # Verify the value is still "Option 5" (not cleared)
+        dash_duo.wait_for_text_to_equal("#output", "Selected: Option 5")
+
+        # Close with Escape
+        dropdown.click()
+        sleep(0.1)
+
+        # Verify the value is still "Option 5"
+        dash_duo.wait_for_text_to_equal("#output", "Selected: Option 5")
+
+    assert dash_duo.get_logs() == []
+
+
+def test_a11y008_home_end_pageup_pagedown_navigation(dash_duo):
+    def send_keys(key):
+        actions = ActionChains(dash_duo.driver)
+        actions.send_keys(key)
+        actions.perform()
+
+    def get_focused_option_text():
+        return dash_duo.driver.execute_script(
+            """
+            const focused = document.activeElement;
+            if (focused && focused.closest('.dash-options-list-option')) {
+                return focused.closest('.dash-options-list-option').textContent.trim();
+            }
+            return null;
+            """
+        )
+
+    app = Dash(__name__)
+    app.layout = Div(
+        [
+            Dropdown(
+                id="dropdown",
+                options=[f"Option {i}" for i in range(0, 50)],
+                multi=True,
+            ),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element("#dropdown")
+    dropdown.send_keys(Keys.ENTER)  # Open with Enter key
+    dash_duo.wait_for_element(".dash-dropdown-options")
+
+    # Navigate from search input to options
+    send_keys(Keys.ARROW_DOWN)  # Move from search to first option
+    sleep(0.05)
+    send_keys(Keys.ARROW_DOWN)  # Move to second option
+    sleep(0.05)
+    send_keys(Keys.ARROW_DOWN)  # Move to third option
+    sleep(0.05)
+    send_keys(Keys.ARROW_DOWN)  # Move to fourth option
+    sleep(0.05)
+    assert get_focused_option_text() == "Option 3"
+
+    send_keys(Keys.HOME)  # Should go back to search input (index 0)
+    # Verify we're back at search input
+    assert dash_duo.driver.execute_script(
+        "return document.activeElement.type === 'search';"
+    )
+
+    # Now arrow down to first option
+    send_keys(Keys.ARROW_DOWN)
+    assert get_focused_option_text() == "Option 0"
+
+    # Test End key - should go to last option
+    send_keys(Keys.END)
+    assert get_focused_option_text() == "Option 49"
+
+    # Test PageUp - should jump up by 10
+    send_keys(Keys.PAGE_UP)
+    assert get_focused_option_text() == "Option 39"
+
+    # Test PageDown - should jump down by 10
+    send_keys(Keys.PAGE_DOWN)
+    assert get_focused_option_text() == "Option 49"
+
+    # Test PageUp from middle
+    send_keys(Keys.HOME)  # Back to search input (index 0)
+    send_keys(Keys.PAGE_DOWN)  # Jump to index 10 (Option 9)
+    send_keys(Keys.PAGE_DOWN)  # Jump to index 20 (Option 19)
+    assert get_focused_option_text() == "Option 19"
+
+    send_keys(Keys.PAGE_UP)  # Jump to index 10 (Option 9)
+    assert get_focused_option_text() == "Option 9"
+
+    assert dash_duo.get_logs() == []
+
+
 def elements_are_visible(dash_duo, elements):
     # Check if the given elements are within the visible viewport of the dropdown
     elements = elements if isinstance(elements, list) else [elements]
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
@@ -41,16 +41,113 @@ def update_value(val):
     output_text = dash_duo.find_element("#dropdown-value").text
 
     dash_duo.find_element("#my-unclearable-dropdown ").click()
+    dash_duo.wait_for_element(".dash-dropdown-options")
 
     # Clicking the selected item should not de-select it.
+    # Click on the option container instead of the input directly
     selected_item = dash_duo.find_element(
-        f'.dash-dropdown-options input[value="{output_text}"]'
+        f'.dash-dropdown-option:has(input[value="{output_text}"])'
     )
     selected_item.click()
     assert dash_duo.find_element("#dropdown-value").text == output_text
     assert dash_duo.get_logs() == []
 
 
+def test_ddcf001b_delete_backspace_keys_clearable_false(dash_duo):
+    from selenium.webdriver.common.keys import Keys
+
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="my-unclearable-dropdown",
+                options=[
+                    {"label": "New York City", "value": "NYC"},
+                    {"label": "Montreal", "value": "MTL"},
+                    {"label": "San Francisco", "value": "SF"},
+                ],
+                value="MTL",
+                clearable=False,
+            ),
+            html.Div(id="dropdown-value"),
+        ]
+    )
+
+    @app.callback(
+        Output("dropdown-value", "children"),
+        Input("my-unclearable-dropdown", "value"),
+    )
+    def update_value(val):
+        return str(val)
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "MTL")
+
+    dropdown = dash_duo.find_element("#my-unclearable-dropdown")
+
+    # Try to clear with Delete key - should not work since clearable=False
+    dropdown.send_keys(Keys.DELETE)
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "MTL")
+
+    # Try to clear with Backspace key - should not work since clearable=False
+    dropdown.send_keys(Keys.BACKSPACE)
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "MTL")
+
+    assert dash_duo.get_logs() == []
+
+
+def test_ddcf001c_delete_backspace_keys_clearable_true(dash_duo):
+    from selenium.webdriver.common.keys import Keys
+
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="my-clearable-dropdown",
+                options=[
+                    {"label": "New York City", "value": "NYC"},
+                    {"label": "Montreal", "value": "MTL"},
+                    {"label": "San Francisco", "value": "SF"},
+                ],
+                value="MTL",
+                clearable=True,
+            ),
+            html.Div(id="dropdown-value"),
+        ]
+    )
+
+    @app.callback(
+        Output("dropdown-value", "children"),
+        Input("my-clearable-dropdown", "value"),
+    )
+    def update_value(val):
+        return str(val)
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "MTL")
+
+    dropdown = dash_duo.find_element("#my-clearable-dropdown")
+
+    # Clear with Delete key - should work since clearable=True
+    dropdown.send_keys(Keys.DELETE)
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "None")
+
+    # Set a value again
+    dropdown.click()
+    dash_duo.wait_for_element(".dash-dropdown-options")
+    option = dash_duo.find_element('.dash-dropdown-option:has(input[value="SF"])')
+    option.click()
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "SF")
+
+    # Clear with Backspace key - should work since clearable=True
+    dropdown.send_keys(Keys.BACKSPACE)
+    dash_duo.wait_for_text_to_equal("#dropdown-value", "None")
+
+    assert dash_duo.get_logs() == []
+
+
 def test_ddcf002_clearable_false_multi(dash_duo):
     app = Dash(__name__)
     app.layout = html.Div(
