dash 2.14.0, 2.9.2
Windows 10
Chrome 118.0.5993.71
Description
When entering a search_value in dcc.Dropdown, the matching options are ordered by value, ignoring the original option order. This behavior only happens when the option values are integers or integer-like strings (i.e. 3 or "3" or 3.0 but not "03" or 3.1).
Expected behavior
The original order of the dropdown options should be preserved when searching.
Example
Searching "*" in the dropdown below returns all three results, but the options are reordered by ascending value.
from dash import Dash, html, dcc
app = Dash(
name=__name__,
)
my_options = [
{"label": "three *", "value": 3},
{"label": "two *", "value": 2},
{"label": "one *", "value": 1},
]
app.layout = html.Div(
[
dcc.Dropdown(
id="my-dropdown",
options=my_options,
searchable=True,
),
]
)

Attempted fixes
I expected Dynamic Dropdowns to give control over custom search behavior. However, even when a particular order of options is specified, the matching options are re-ordered by ascending value.
# This callback should overwrite the built-in search behavior.
# Instead, the filtered options are sorted by ascending value.
@app.callback(
Output("my-dropdown", "options"),
Input("my-dropdown", "search_value"),
)
def custom_search_sort(search_value):
if not search_value:
raise PreventUpdate
return [o for o in my_options if search_value in str(o)]
dash 2.14.0, 2.9.2
Windows 10
Chrome 118.0.5993.71
Description
When entering a
search_valueindcc.Dropdown, the matching options are ordered by value, ignoring the original option order. This behavior only happens when the option values are integers or integer-like strings (i.e. 3 or "3" or 3.0 but not "03" or 3.1).Expected behavior
The original order of the dropdown options should be preserved when searching.
Example
Searching "*" in the dropdown below returns all three results, but the options are reordered by ascending value.
Attempted fixes
I expected Dynamic Dropdowns to give control over custom search behavior. However, even when a particular order of options is specified, the matching options are re-ordered by ascending value.