optimize dropdown search

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3738](https://github.com/plotly/dash/pull/3738) Add missing `stacklevel=2` to `warnings.warn()` calls so warnings report the caller's location instead of internal Dash source lines
 - [#3740](https://github.com/plotly/dash/pull/3740) Fix cannot tab into dropdowns in Safari
 - [#2462](https://github.com/plotly/dash/issues/2462) Allow `MATCH` in `Input`/`State` when the callback's `Output` has no wildcards (fixed-id Output, no Output, or `ALL`-only wildcard Output). `ALLSMALLER` still requires a corresponding `MATCH` in an Output.
+- [#3768](https://github.com/plotly/dash/pull/3768) Improved `Dropdown` search performance for large options lists
 - [#3759](https://github.com/plotly/dash/pull/3759) Fix the issue where `Patch` objects cannot be updated via `set_props()` in `websocket` callback. Fix [#3742](https://github.com/plotly/dash/issues/3742)
 - [#3789](https://github.com/plotly/dash/pull/3789) Fixed extra wrapper in `DatePickerRange` and `DatePickerSingle` causing styling and layout issues.
 

components/dash-core-components/src/utils/dropdownSearch.ts

@@ -23,6 +23,7 @@ export interface SanitizedOptions {
  options: DetailedOption[];
  indexes: string[];
  valueSet: Set<OptionValue>;
+ search: Search;
 }
 
 // Single-pass sanitization via sanitizeOptions, plus detection of
@@ -55,38 +56,48 @@ export function sanitizeDropdownOptions(
  indexes.push('search');
  }
 
- return {options: sanitized, indexes, valueSet};
-}
-
-export function filterOptions(
- options: SanitizedOptions,
- searchValue?: string,
- search_order?: 'index' | 'original'
-): DetailedOption[] {
- if (!searchValue) {
- return options.options;
- }
-
+ // Build the search index ONCE during sanitization
  const search = new Search('value');
  search.searchIndex = new UnorderedSearchIndex();
  search.indexStrategy = new AllSubstringsIndexStrategy();
  search.tokenizer = TOKENIZER;
 
-options.indexes.forEach(index => {
+ indexes.forEach(index => {
  search.addIndex(index);
  });
 
- if (options.options.length > 0) {
- search.addDocuments(options.options);
+ if (sanitized.length > 0) {
+ search.addDocuments(sanitized);
+ }
+
+ return {
+ options: sanitized,
+ indexes,
+ valueSet,
+ search,
+ };
+}
+
+export function filterOptions(
+ options: SanitizedOptions,
+ searchValue?: DropdownProps['search_value'],
+ searchOrder?: DropdownProps['search_order']
+): DetailedOption[] {
+ if (!searchValue) {
+ return options.options;
  }
 
- const searchResults =
- (search.search(searchValue) as DetailedOption[]) || [];
+ const results =
+ (options.search.search(searchValue) as DetailedOption[]) || [];
 
- if (search_order === 'original') {
- const resultSet = new Set(searchResults);
- return options.options.filter(option => resultSet.has(option));
+ // Preserve original option order
+ if (searchOrder === 'original') {
+ const resultSet = new Set(results.map(option => option.value));
+
+ return options.options.filter(option =>
+ resultSet.has(option.value)
+ );
  }
 
- return searchResults;
+ return results;
 }