Skip to content

refactor: optimize autosuggest filterOptions performance - #4206

Merged
pan-kot merged 1 commit into
cloudscape-design:mainfrom
TrevorBurnham:refactor-autosuggest-filteroptions
Sep 3, 2026
Merged

refactor: optimize autosuggest filterOptions performance#4206
pan-kot merged 1 commit into
cloudscape-design:mainfrom
TrevorBurnham:refactor-autosuggest-filteroptions

Conversation

@TrevorBurnham

Copy link
Copy Markdown
Contributor

Description

This PR optimizes the filterOptions utility in src/autosuggest/utils/utils.ts by applying three micro-optimizations:

  1. Hoist field arrays to module scope: Move searchableFields and searchableTagFields arrays outside the matchSingleOption function to avoid recreating them on every call
  2. Move toLowerCase() outside the filter loop: The search text is now lowercased once in filterOptions rather than on every matchSingleOption call
  3. Replace indexOf() !== -1 with includes(): More idiomatic and slightly faster for substring matching

The filterOptions function is called whenever:

  • A user types in an autosuggest input (with filteringType="auto")
  • The dropdown options need to be filtered based on the entered text

This is a hot path during user interaction, as filtering runs on every keystroke.

Micro-benchmarks show 10-25% improvement for typical filtering scenarios

How has this been tested?

Existing tests provide extensive coverage for this functionality.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@TrevorBurnham
TrevorBurnham requested a review from a team as a code owner January 25, 2026 15:18
@TrevorBurnham
TrevorBurnham requested review from cansuaa and removed request for a team January 25, 2026 15:18

@pan-kot pan-kot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR needs a conflict resolution with main.

@TrevorBurnham
TrevorBurnham force-pushed the refactor-autosuggest-filteroptions branch from 01ac133 to 6c601fa Compare July 11, 2026 01:15
@TrevorBurnham

Copy link
Copy Markdown
Contributor Author

The PR needs a conflict resolution with main.

Done!

@pan-kot
pan-kot enabled auto-merge July 13, 2026 04:49

@pan-kot pan-kot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@TrevorBurnham please fix failing tests

auto-merge was automatically disabled July 13, 2026 11:42

Head branch was pushed to by a user without write access

@TrevorBurnham
TrevorBurnham force-pushed the refactor-autosuggest-filteroptions branch from 6c601fa to 30929cd Compare July 13, 2026 11:42
@TrevorBurnham

Copy link
Copy Markdown
Contributor Author

@TrevorBurnham please fix failing tests

Done!

@pan-kot
pan-kot self-requested a review August 25, 2026 07:53
@TrevorBurnham
TrevorBurnham force-pushed the refactor-autosuggest-filteroptions branch from 4588c9c to 5c7110d Compare August 26, 2026 15:08

@pan-kot pan-kot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests still fail

@TrevorBurnham
TrevorBurnham force-pushed the refactor-autosuggest-filteroptions branch from ee4401c to 9f3d9af Compare August 28, 2026 14:41
@TrevorBurnham
TrevorBurnham requested a review from pan-kot August 28, 2026 14:48
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 August 31, 2026 08:24 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 August 31, 2026 08:25 Inactive
@pan-kot
pan-kot enabled auto-merge August 31, 2026 10:00
@pan-kot
pan-kot disabled auto-merge August 31, 2026 10:00
Comment thread src/autosuggest/utils/utils.ts Outdated
- Move searchableFields and searchableTagFields arrays to module scope
  to avoid recreating them on every matchSingleOption call
- Move toLowerCase() call outside the filter loop to avoid repeated
  string operations
- Replace indexOf() !== -1 with includes() for cleaner, slightly faster
  string matching

Benchmarks show 10-25% improvement for typical filtering scenarios.

Hoisting toLowerCase() out of the loop made it run even when there are no
options to match, which surfaced a stale prop in the shared test fixture:
autosuggest was given `enteredPrefix`, a prop that no longer exists, so it
rendered without the required `value` and filtered on undefined text. The
fixture now passes `value` instead.

Also adds direct unit tests for filterOptions, which had none.
@TrevorBurnham
TrevorBurnham force-pushed the refactor-autosuggest-filteroptions branch from e6d8b55 to 5e99841 Compare September 2, 2026 15:28
@pan-kot
pan-kot requested a lite review from Copilot September 2, 2026 15:51

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The changes are localized performance refactors with added test coverage, and the only noted issue is a minor maintainability improvement.

Pull request overview

This PR refactors the Autosuggest filtering hot path (filterOptions) to reduce per-option work during typing, and adds focused unit coverage for the filtering behavior.

Changes:

  • Hoists searchable field lists to module scope and lowercases the search text once per filter pass.
  • Uses String.prototype.includes for substring checks in matchString.
  • Adds unit tests for filterOptions and updates required props for the Autosuggest component test setup.
File summaries
File Description
src/autosuggest/utils/utils.ts Applies micro-optimizations in the filtering logic and updates substring matching implementation.
src/autosuggest/tests/utils.test.ts Adds unit tests covering matching fields/tags, case-insensitivity, group preservation, and empty search behavior.
src/tests/required-props-for-components.ts Updates Autosuggest required-props defaults to use value instead of enteredPrefix.
Review details
  • Files reviewed: 3/3 changed files
  • Comments generated: 1
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines 45 to 47
const matchString = (value: string | undefined, searchText: string) => {
return value && value.toLowerCase().indexOf(searchText) !== -1;
return value && value.toLowerCase().includes(searchText);
};
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 2, 2026 16:26 Inactive
@codecov

codecov Bot commented Sep 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.76%. Comparing base (6de850b) to head (5e99841).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4206      +/-   ##
==========================================
- Coverage   97.66%   93.76%   -3.91%     
==========================================
  Files         959      958       -1     
  Lines       31342    27138    -4204     
  Branches    11578     9761    -1817     
==========================================
- Hits        30610    25445    -5165     
+ Misses        686      613      -73     
- Partials       46     1080    +1034     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 2, 2026 16:26 Inactive
@pan-kot
pan-kot enabled auto-merge September 3, 2026 08:19
@pan-kot
pan-kot added this pull request to the merge queue Sep 3, 2026
Merged via the queue into cloudscape-design:main with commit dec0201 Sep 3, 2026
87 of 88 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants