Fix #2989: dcc.Dropdown options order preserved during search

[ines-om]

This PR fixes#2989.

When searching in dcc.Dropdown, search results should be presented in the original option order instead of being reordered by js-search. This is achieved by creating a Set of the search results and filtering the original options array against it, preserving the intended order.

Contributor Checklist

• I have broken down my PR scope into the following TODO tasks
  • Implement Set-based filtering in DropdownSearch.tsx to preserve user-defined order in search results
  • Add tests for various option ordering scenarios, including ordering in multi-value dropdowns
• I have run the tests locally and they passed. (refer to testing section in contributing)
• I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

• I have added entry in the CHANGELOG.md
• If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
  • this GitHub #PR number updates the dash docs
  • here is the show and tell thread in Plotly Dash community

[AnnMarieW]

Hi @ines-om

Thanks for this PR!
Note – this also closes #2667.

Since this changes the current search ordering, it would be safer to make it opt-in by adding a new prop, for example:

search_order="original"|"index"

where original preserves the input options order, and index matches the current behavior (and remains the default).

This keeps backward compatibility and also leaves room for future improvements, for example adding a "ranking" mode as in PR #3573

[ines-om]

Hi @AnnMarieW

Thank you for the feedback! I’ve updated the PR to include the search_order prop as suggested.

I have verified the implementation and confirmed that the tests added only pass with search_order='original', as 'index' (the default) maintains the previous behavior.

I hope this implementation is well aligned with the 'ranking' mode PR #3573.

Let me know if I should add or change anything!

[AnnMarieW]

I also ran some examples based on this PR and it looks good thanks @ines-om

Next steps:

• final review by maintainers
• add a changelog
• add example to the docs

Here's a suggestion for a sample app for the docs:

fromdashimportDash, dcc, htmlapp=Dash()
app.layout=dcc.Dropdown(
id="version-dropdown",
options=[
{"label": "Version 3", "value": 3},
{"label": "Version 2", "value": 2},
{"label": "Version 1", "value": 1},
],
placeholder="Search version...",
searchable=True,
# Preserve the original order after searchsearch_order="original",
)
if__name__=="__main__":
app.run(debug=True)

[T4rk1n]

Looks good 💃

[ines-om]

Hi @AnnMarieW

Just added the changelog!

Regarding the docs, I tried to follow the link to the dash-docs repo in CONTRIBUTING.md, but it is returning a 404 for me. Is the repository private or is there another location I should use for the docs?

Thank you!

[AnnMarieW]

@ines-om Thanks for the changelog entry!

The docs library is private so that will have to be upated by the Plotly team. Thanks for offering to help with that too!