Feature/add possibility to limit options for autocomplete

[blackymax]

Screen.Recording.2026-02-04.at.00.43.23.mov

Summary by CodeRabbit

• New Features
  • Autocomplete components now support an options limit and a customizable limitation message. When available options exceed the configured limit, a non-interactive informational line appears (default: "Too many results. Type to search"), improving feedback for large result sets and clarifying that more items exist beyond the shown list.

[coderabbitai]

Walkthrough

The pull request adds two optional props, optionsLimit and limitationText, to autocomplete components' prop interfaces and implements a non-interactive limitation message in AutocompleteOptions when available options exceed the configured limit. A .limitation-item CSS class was added for its styling.

Changes

Cohort / File(s)	Summary
Autocomplete Prop Interfaces src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.tsx, src/components/autocompletes/multipleAutocomplete/multipleAutocomplete.tsx, src/components/autocompletes/singleAutocomplete/singleAutocomplete.tsx	Added optional props optionsLimit?: number and limitationText?: string to the public prop types of three autocomplete components.
AutocompleteOptions Implementation src/components/autocompletes/common/autocompleteOptions.tsx	Extended AutocompleteOptionsProps<T> with optionsLimit and limitationText; added defaults (limitationText = 'Too many results. Type to search', optionsLimit = 0) and conditional rendering of a non-interactive limitation message when availableOptions.length > optionsLimit.
Limitation Item Styling src/components/autocompletes/common/autocompleteOptions.module.scss	Added .limitation-item CSS class (non-interactive, layout constraints, typography/color) for the limitation message element.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Feature/move autocomplete component to UI kit #159: Modifies prop interfaces in the same autocomplete component files.
• Move autocomplete to ui-kit (base transfer) #131: Related changes extending autocomplete props and adding a limitation message across autocomplete components.

Suggested reviewers

• AmsterGet
• allaprischepa
• maria-hambardzumian
• siarheirazuvalau
• ViktorSoroka07

Poem

🐰
I hopped through props and styled a line,
When options swell, a message will shine.
Quiet and gentle, it sits in the list,
A rabbit's nudge so nothing's missed. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature being added: the ability to limit options displayed in autocomplete components through new optionsLimit and limitationText props.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/add-possibility-to-limit-options-for-autocomplete

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.tsx`:
- Around line 65-69: The current slice of props.options using optionsLimit
happens before AutocompleteOptions does its internal filtering, which can
prevent matches outside the first optionsLimit; remove the pre-filter slice here
and instead apply the limit after filtering (ideally inside AutocompleteOptions
by capping the computed availableOptions to optionsLimit), or if you prefer
minimal change, pass optionsLimit through and have AutocompleteOptions apply the
slice after it computes availableOptions; update references in
AutocompleteOptions (e.g., availableOptions) to enforce the limit.
- Around line 70-71: The limitation message currently renders whenever there are
any options because the condition only checks props?.options?.length >
optionsLimit; change the JSX condition to also require optionsLimit > 0
(matching the check used on line 68) so the message only appears when a limit is
active, and replace the invalid <p> inside the <ul> with an <li
aria-hidden="true" className={cx('limitation-item')}> to keep valid list markup;
update the conditional rendering around limitationText and optionsLimit in the
autocompleteMenu JSX (look for optionsLimit, limitationText, and props?.options)
accordingly.

🧹 Nitpick comments (1)

src/components/autocompletes/common/autocompleteMenu/autocompleteMenu.module.scss (1)

45-56: Remove the cursor: pointer on a non-interactive item.

With pointer-events: none, the element won’t be interactive; cursor: pointer is misleading. Consider dropping it to match behavior.

[ViktorSoroka07]

• Label TMS
• Also please link to you task on board

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/autocompletes/common/autocompleteOptions.tsx`:
- Around line 70-71: The default optionsLimit of 1 causes the limitation message
to appear whenever availableOptions.length > 1; change optionsLimit to be opt-in
(remove the numeric default or set it to undefined/Infinity) and update the
render condition to check that optionsLimit is set before comparing (e.g.,
optionsLimit != null && availableOptions.length > optionsLimit) so
limitationText only shows when the consumer explicitly provides optionsLimit and
limitationText; adjust the prop default/typing where optionsLimit and
limitationText are declared in autocompleteOptions.tsx accordingly.

🧹 Nitpick comments (1)

src/components/autocompletes/common/autocompleteOptions.tsx (1)

166-168: The options list is not actually truncated — only a message is shown.

The prop name optionsLimit implies the displayed options will be capped at that number, but all availableOptions are still rendered via renderItems(availableOptions) on line 165. If the intent is to both limit and inform, consider slicing the rendered list:

Optional: slice the rendered options

-        {!isEmpty(availableOptions) ? renderItems(availableOptions) : renderEmptyList()}
-        {availableOptions?.length > optionsLimit && limitationText ? (
+        {!isEmpty(availableOptions)
+          ? renderItems(optionsLimit ? availableOptions.slice(0, optionsLimit) : availableOptions)
+          : renderEmptyList()}
+        {optionsLimit && availableOptions?.length > optionsLimit && limitationText ? (

If the message-only behavior is intentional (e.g., the backend already limits results), consider renaming the prop to something like optionsCountThreshold to better communicate that it's a display threshold, not a cap.