Fix searching by dropdown value

Author: KoolADE85

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

@@ -42,7 +42,7 @@ function DropdownLabel(
         );
     }
     const displayLabel = `${props.label ?? props.value}`;
-    return <span>{displayLabel}</span>;
+    return <span title={props.title}>{displayLabel}</span>;
 }
 
 const DropdownOption: React.FC<DropdownOptionProps> = ({
@@ -320,10 +320,19 @@ const Dropdown = (props: DropdownProps) => {
             return;
         }
 
+        // 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
+        ) {
+            return;
+        }
+
         const focusableElements = e.currentTarget.querySelectorAll(
             'input[type="search"], input[type="checkbox"]:not([disabled])'
         ) as NodeListOf<HTMLElement>;
 
+        // Don't interfere with the event if there aren't any options that the user can interact with
         if (focusableElements.length === 0) {
             return;
         }

components/dash-core-components/src/utils/dropdownSearch.ts

@@ -36,7 +36,7 @@ export function createFilteredOptions(
     // Sanitize and prepare options
     let sanitized = sanitizeOptions(options);
 
-    const indexes = [];
+    const indexes = ['value'];
     let hasElement = false,
         hasSearch = false;
 

components/dash-core-components/tests/integration/misc/test_dcc_components_as_props.py

@@ -1,4 +1,6 @@
+from selenium.webdriver.common.keys import Keys
 from dash import Dash, dcc, html
+from dash.testing import wait
 
 
 def test_mdcap001_dcc_components_as_props(dash_dcc):
@@ -49,25 +51,26 @@ def test_mdcap001_dcc_components_as_props(dash_dcc):
     dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
     dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")
 
-    search_input = dash_dcc.find_element("#dropdown input")
+    search_input = dash_dcc.find_element("#dropdown .dash-dropdown-search")
     search_input.send_keys("4")
-    options = dash_dcc.find_elements("#dropdown .VirtualizedSelectOption")
+    options = dash_dcc.find_elements("#dropdown .dash-dropdown-option")
 
     assert len(options) == 1
-    assert options[0].text == "h4"
+    wait.until(lambda: options[0].text == "h4", 1)
+
+    search_input.send_keys(Keys.ESCAPE)
+    dash_dcc.find_element("#indexed-search").click()
 
     def search_indexed(value, length, texts):
-        search = dash_dcc.find_element("#indexed-search input")
+        search = dash_dcc.find_element("#indexed-search .dash-dropdown-search")
         dash_dcc.clear_input(search)
         search.send_keys(value)
-        opts = dash_dcc.find_elements("#indexed-search .VirtualizedSelectOption")
+        opts = dash_dcc.find_elements("#indexed-search .dash-dropdown-option")
 
         assert len(opts) == length
         assert [o.text for o in opts] == texts
 
     search_indexed("o", 2, ["one", "two"])
     search_indexed("1", 1, ["one"])
     search_indexed("uno", 1, ["one"])
-    # FIXME clear_input doesnt work well when the input is focused. (miss the o)
-    dash_dcc.clear_input("#indexed-search input")
     search_indexed("dos", 1, ["two"])

components/dash-core-components/tests/integration/test_title_props.py

@@ -52,16 +52,15 @@ def add_title_to_option(title):
     dash_dcc.start_server(app)
 
     elements = [
-        dash_dcc.wait_for_element("#dropdown_1 .Select-value"),
-        dash_dcc.wait_for_element("#dropdown_2 .Select-value"),
+        dash_dcc.wait_for_element("#dropdown_1 .dash-dropdown-value span"),
+        dash_dcc.wait_for_element("#dropdown_2 .dash-dropdown-value span"),
         dash_dcc.wait_for_element("#checklist_1 .Select-value-label"),
         dash_dcc.wait_for_element("#radioitems_1 .Select-value-label"),
     ]
 
     component_title_input = dash_dcc.wait_for_element("#title_input")
 
     # Empty string title ('') (default for no title)
-
     for element in elements:
         wait.until(lambda: element.get_attribute("title") == "", 3)