Dropdown component label search

components/dash-core-components/src/components/Dropdown.react.js

@@ -80,6 +80,14 @@ Dropdown.propTypes = {
                  * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
                  */
                 title: PropTypes.string,
+
+                /**
+                 * Optional search value for the option, to use if the label
+                 * is a component or provide a custom search value different
+                 * from the label. If no search value and the label is a
+                 * component, the `value` will be used for search.
+                 */
+                search: PropTypes.string,
             })
         ),
     ]),

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -47,12 +47,39 @@ const Dropdown = props => {
     } = props;
     const [optionsCheck, setOptionsCheck] = useState(null);
     const [sanitizedOptions, filterOptions] = useMemo(() => {
-        const sanitized = sanitizeOptions(options);
+        let sanitized = sanitizeOptions(options);
+
+        const indexes = ['strValue'];
+        let hasElement = false,
+            hasSearch = false;
+        sanitized = Array.isArray(sanitized)
+            ? sanitized.map(option => {
+                  if (option.search) {
+                      hasSearch = true;
+                  }
+                  if (React.isValidElement(option.label)) {
+                      hasElement = true;
+                  }
+                  return {
+                      ...option,
+                      strValue: String(option.value),
+                  };
+              })
+            : sanitized;
+
+        if (!hasElement) {
+            indexes.push('label');
+        }
+        if (hasSearch) {
+            indexes.push('search');
+        }
+
         return [
             sanitized,
             createFilterOptions({
                 options: sanitized,
                 tokenizer: TOKENIZER,
+                indexes,
             }),
         ];
     }, [options]);

components/dash-core-components/src/utils/optionTypes.js

@@ -1,9 +1,10 @@
+import React from 'react';
 import {type} from 'ramda';
 
 export const sanitizeOptions = options => {
     if (type(options) === 'Object') {
         return Object.entries(options).map(([value, label]) => ({
-            label: String(label),
+            label: React.isValidElement(label) ? label : String(label),
             value,
         }));
     }

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

@@ -27,6 +27,13 @@ def test_mdcap001_dcc_components_as_props(dash_dcc):
                 ],
                 id="dropdown",
             ),
+            dcc.Dropdown(
+                [
+                    {"label": "one", "value": 1, "search": "uno"},
+                    {"label": "two", "value": 2, "search": "dos"},
+                ],
+                id="indexed-search",
+            ),
         ]
     )
 
@@ -41,3 +48,26 @@ def test_mdcap001_dcc_components_as_props(dash_dcc):
     dash_dcc.find_element("#dropdown").click()
     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.send_keys("4")
+    options = dash_dcc.find_elements("#dropdown .VirtualizedSelectOption")
+
+    assert len(options) == 1
+    assert options[0].text == "h4"
+
+    def search_indexed(value, length, texts):
+        search = dash_dcc.find_element("#indexed-search input")
+        dash_dcc.clear_input(search)
+        search.send_keys(value)
+        opts = dash_dcc.find_elements("#indexed-search .VirtualizedSelectOption")
+
+        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"])