Skip to content

Dropdown reordering options by value on search #2667

@TGeary

Description

@TGeary

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,
        ),
    ]
)

Dropdown_Search_Order

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)]

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions