Skip to content

Dropdown reordering options by value on search #2667

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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