@sberbusiness/triplex-next-mcp-server 1.45.0-beta → 1.48.0-beta

package/bundle/components/SuggestField.md

@@ -1,9 +1,7 @@
 ---
 component: SuggestField
-category: Form Controls
-figma-node: ""
-figma-file: ""
-related: [Suggest, SelectField, Dropdown, TextField, MobileView, FormFieldInput]
+category: TextFields
+related: [Suggest, SelectField, TextField, FormField, Dropdown]
 tokens: []
 stories: stories/SuggestField/SuggestField.stories.tsx
 version: "1.0"
@@ -13,140 +11,225 @@ version: "1.0"
 
 ## Назначение
 
-Поле autocomplete: input + dropdown с фильтрацией опций. Адаптивное
-переключение desktop/mobile через `MobileView` — desktop показывает Dropdown,
-mobile — полноэкранный лист с hint. Поддерживает render-функции
-(`renderInput`, `renderDropdown`, `renderDropdownList`, `renderDropdownListItem`)
-для кастомизации.
+Готовое поле ввода с выпадающим списком и поиском по введённому значению: лейбл, статусы,
+префикс/постфикс, лоадер, кнопка очистки и подсказка-Tooltip уже собраны. Компонент
+**не фильтрует список сам** — он сообщает введённый текст через `onFilter`, а потребитель
+возвращает новый `options`.
 
-Используй когда: нужен готовый UX autocomplete-поля с label/tooltip/loading/
-noOptionsText. Для headless-логики — `Suggest` (+ свой UI).
-Для статического dropdown без фильтрации — `SelectField`.
+Адаптивный: на ширине экрана < 768px вместо десктопного поля с выпадающим списком рендерится
+мобильный вариант — поле только для чтения, по фокусу открывающее полноэкранный дропдаун с
+собственным полем ввода. Переключение делает `MobileView`, потребителю ничего делать не нужно.
 
----
-
-## Файловая структура
-
-```text
-src/components/SuggestField/
-├── SuggestField.tsx                  # корневой — MobileView switcher
-├── types.ts                          # ISuggestFieldProps, ISuggestFieldOption
-├── desktop/
-│   ├── SuggestFieldDesktop.tsx
-│   ├── SuggestFieldDesktopDropdown.tsx
-│   └── types.ts
-├── mobile/
-│   ├── SuggestFieldMobile.tsx
-│   ├── SuggestFieldMobileDropdown.tsx
-│   ├── SuggestFieldMobileDropdownHint.tsx
-│   └── types.ts
-└── index.ts
-```
+Используй когда: нужно поле с подсказками-опциями — поиск контрагента, счёта, адреса, в том
+числе с асинхронной догрузкой (`loading`, `dropdownListLoading`, `onScrollEnd`).
 
-**Примечание:** в `SuggestFieldDesktop.tsx` — TODO «переписать через useSuggest».
-Desktop-вариант дублирует логику из `useSuggest` (свой state). Mobile тоже.
+Не используй когда:
+- Список фиксированный и вводом не фильтруется — возьми `SelectField`.
+- Нужен suggest-фильтр в ряду чипсов — возьми `ChipSuggest`.
+- Нужна нестандартная разметка управляющего элемента или списка — собери своё на headless
+  `Suggest`; `SuggestField` жёстко задаёт композицию `TextFieldBase` + `Dropdown`.
 
 ---
 
-## Публичный API
+## Варианты и props
 
-### `SuggestField<T extends ISuggestFieldOption>`
+`ISuggestFieldProps<T>` расширяет `Omit<ITextFieldProps, "onSelect">`, поэтому всё из
+`TextField` / `FormField` доступно: `status`, `size`, `active`, `label`, `description`,
+`counter`, `prefix`, `postfix`, `className`, `data-*`, `inputProps`.
 
-Generic. Корневой компонент-switcher.
-
-Props = `Omit<ITextFieldProps, "onSelect"> & DataAttributes` + поля ниже:
+### Обязательные props
 
 | Prop | Тип | Описание |
 |---|---|---|
-| `value` | `T \| undefined` | Выбранная опция. |
-| `options` | `T[]` | Список опций. |
-| `label?` | `string` | Лейбл над полем. |
-| `placeholder?` | `string` | Подсказка в пустом поле. |
-| `tooltipHint` | `string` | Текст Tooltip (обязателен). |
-| `tooltipOpen` | `boolean` | Контроль видимости Tooltip (обязателен). |
-| `loading?` | `boolean` | Общий loading. |
-| `dropdownListLoading?` | `boolean` | Loading хвоста списка (при пагинации). |
-| `clearInputOnFocus?` | `boolean` | Очищать input при focus. |
-| `onSelect` | `(value: T \| undefined) => void` | Колбэк выбора. |
-| `onFilter` | `(value: string) => void` | Колбэк ввода. |
-| `onScrollEnd?` | `() => void` | Пагинация. |
-| `onClear?` | `MouseEventHandler<HTMLButtonElement>` | Колбэк кнопки очистки. |
-| `renderInput?` | `(props: IFormFieldInputProps) => JSX.Element` | Кастомный input. |
-| `inputProps` | `IFormFieldInputProps` | Обязателен (наследовано из `TextField`). |
-
-Desktop дополнительно принимает `renderDropdown`, `renderDropdownList`, `renderDropdownListItem`.
-
-### `ISuggestFieldOption`
-
-```ts
-{ id: string; label: string; content?: ReactNode; showNotificationIcon?: boolean }
-```
+| `value` | `T \| undefined` | Выбранная опция. Контролируемое значение: при смене `value.id` поле ввода перезаписывается на `value.label` |
+| `options` | `T[]` | Список опций. Фильтрует потребитель в ответ на `onFilter` — компонент список не фильтрует и не сортирует |
+| `tooltipHint` | `string` | Текст подсказки («Ничего не найдено», «Введите более 3 символов»). Обязателен, даже если `tooltipOpen` всегда `false` |
+| `tooltipOpen` | `boolean` | Показывать подсказку. Управляется снаружи: компонент сам не решает, когда список «пустой по делу» |
+| `onSelect` | `(value: T \| undefined) => void` | Опция выбрана. Вызывается с `undefined`, когда значение сбрасывается. На десктопе это blur с пустым полем и кнопка очистки; на мобильном — только закрытие дропдауна с пустым вводом, кнопка очистки там зовёт лишь `onClear` (см. «Инварианты»), так что сброс значения ложится на потребителя |
+| `onFilter` | `(value: string) => void` | Текст поля ввода изменился. Ответ — обновлённый `options` |
+| `inputProps` | `IFormFieldInputProps & { ref?: React.Ref<HTMLInputElement> }` | Свойства поля ввода. **Не опционально:** передавай хотя бы `{}`. Через `inputProps.ref` потребитель получает ref на `<input>` — собственного `forwardRef` у компонента нет |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | `EComponentSize.LG` | Размер поля и выпадающего списка |
+| `status` | `EFormFieldStatus` | `EFormFieldStatus.DEFAULT` | `DISABLED` блокирует ввод и подавляет Tooltip |
+| `label` | `string` | — | Лейбл над полем ввода |
+| `placeholder` | `string` | — | Подсказка в пустом поле |
+| `loading` | `boolean` | — | Лоадер в постфиксе поля (десктоп) и в шапке дропдауна (мобильный) |
+| `dropdownListLoading` | `boolean` | — | Догрузка списка: лоадер под уже загруженными опциями. Пока `true`, `onScrollEnd` не вызывается |
+| `clearInputOnFocus` | `boolean` | `false` | Очищать поле ввода при получении фокуса. На десктопе дополнительно вызывает `onFilter("")` |
+| `onScrollEnd` | `() => void` | — | Список прокручен до конца — грузи следующую страницу опций |
+| `onClear` | `React.MouseEventHandler<HTMLButtonElement>` | — | Обработчик очистки. **Кнопка очистки рендерится, только если он передан** |
+| `renderInput` | `(props: IFormFieldInputProps) => JSX.Element` | `FormFieldInput` | Замена поля ввода |
+
+Только десктопный `SuggestFieldDesktop` дополнительно принимает `renderDropdown`,
+`renderDropdownList`, `renderDropdownListItem`.
+
+### Опция (`ISuggestFieldOption`)
+
+`id` (уникальный; по нему сравнивается с `value` и строится ключ списка), `label` (текст в
+поле ввода и в списке), `content` (кастомная разметка опции в списке вместо `label`),
+`showNotificationIcon` (значок новых уведомлений).
+
+Тип опции расширяется дженериком: `<SuggestField<IMyOption> ...>` протаскивает `IMyOption`
+в `value`, `options` и `onSelect`.
 
 ### `SuggestField.Input`
 
-Re-export `FormFieldInput` — для удобства доступа.
+Статическое поле — это `FormFieldInput`. Нужно, чтобы потребитель собирал собственный
+`renderInput` из того же компонента: `renderInput={(props) => <SuggestField.Input {...props} />}`.
 
----
+### Поведение десктопного варианта
 
-## Поведение
+| Действие | Что происходит |
+|---|---|
+| Фокус / mousedown по полю | Список открывается, если `options` не пуст |
+| Появились опции, пока поле в фокусе | Список открывается автоматически |
+| `options` стал пустым | Список закрывается |
+| Ввод текста | `onFilter(value)`, сброс `aria-activedescendant`, список снова разрешён к автооткрытию |
+| `Escape` при открытом списке | Список закрывается, всплытие останавливается, автооткрытие подавлено до следующего ввода или mousedown |
+| Выбор опции | `onSelect(option)`, в поле подставляется `label`, автооткрытие подавлено |
+| Blur с непустым полем | В поле возвращается `label` текущего `value` |
+| Blur с пустым полем и заданным `value` | `onSelect(undefined)` |
+| Клик по кнопке очистки | `onSelect(undefined)` (если было значение), `onFilter("")` (если поле не пустое), затем `onClear(event)` |
 
-### Desktop
+`inputProps.onFocus` / `onBlur` / `onKeyDown` / `onMouseDown` / `onChange` вызываются
+**после** внутренних обработчиков — подменить их через `inputProps` нельзя. С остальными
+свойствами наоборот: `value`, `placeholder`, `data-test-id` из `inputProps` спредятся после
+внутренних значений и перекрывают их.
 
-- Собственный state: `inputValue`, `inputFocused`, `dropdownOpen`, `ignoreAutoOpen`, `activeDescendant`, `dropdownListId`.
-- `ignoreAutoOpen` — предотвращает немедленное переоткрытие dropdown сразу после выбора (иначе селектнутый item → focus остаётся на input → dropdown открывается снова).
-- Синхронизация `value?.id !== prevValue?.id` → `setInputValue(value?.label)`.
-- `clearInputOnFocus` + focus с непустым input → `setInputValue("")` + `onFilter("")`.
-- `activeDescendant` — id подсвеченного элемента списка (для `aria-activedescendant`).
+### Поведение мобильного варианта
 
-### Mobile (`SuggestFieldMobile`)
+Поле-триггер — `readOnly`, по фокусу открывается полноэкранный `Dropdown` с собственным полем
+ввода (автофокус). При `tooltipOpen` вместо списка показывается `SuggestFieldMobileDropdownHint`
+с текстом `tooltipHint`. Закрытие дропдауна с пустым полем ввода и заданным `value` вызывает
+`onSelect(undefined)`; закрытие сразу после выбора опции значение не сбрасывает. После закрытия
+поле-триггер скроллится в центр экрана (в iOS открытие дропдауна уводит страницу вверх).
 
-- Открывает полноэкранный лист с input'ом и списком.
-- `SuggestFieldMobileDropdownHint` — текст-подсказка над списком.
-- Рендерится только внутри `MobileView` (viewport <= SM).
+---
 
-### `MobileView`
+## Дизайн-токены
 
-Корневой `SuggestField.tsx` рендерит `<MobileView fallback={SuggestFieldDesktop}>SuggestFieldMobile</MobileView>` — выбор по media query.
+Собственных токенов нет. Единственный стиль компонента — `styles/SuggestFieldMobile.module.less` —
+задаёт высоту тела мобильного дропдауна и отступ подсказки фиксированными значениями. Внешний вид
+целиком определяют `FormField` / `TextField`, `Dropdown`, `Tooltip` и `Loader` — их токены
+переопределяются через `ThemeProvider` в соответствующих AI.md.
 
 ---
 
 ## Инварианты
 
-- **Generic `<T extends ISuggestFieldOption>`** — сохранять. `SuggestField.Input = FormFieldInput`.
-- **`tooltipHint` и `tooltipOpen` — обязательные** (не опциональные, как может казаться). Tooltip — часть UX.
-- **Синхронизация `value` → `inputValue`** через render-сравнение (по `id`, не по ссылке).
-- **`inputProps` обязателен** (прокидывается в `FormFieldInput`) — наследство из `TextField`. Не default'ить на `{}` без причины.
-- **`onSelect(undefined)`** допустимо (сбрасывает).
-- **Два разных state-дерева** (desktop и mobile) — не объединять без refactor'а под `useSuggest`.
-- **`MobileView` определяет ветку по media-query** — не по прямому props. Для force desktop/mobile в тестах — имитировать viewport.
+- **`forwardRef` на публичных компонентах семейства нет.** `SuggestField`, `SuggestFieldDesktop`
+  и `SuggestFieldMobile` — обычные дженерик-функции: внутренний `ref` занят корневым
+  `TextFieldBase`, и он же служит `targetRef` для `Dropdown` и `Tooltip`. `forwardRef` есть
+  только у `SuggestFieldMobileDropdown`. Добавление `forwardRef` остальным — изменение
+  публичного API, решение мейнтейнера. По той же причине `SuggestFieldMobileDropdown` намеренно
+  оставлен без `displayName`: в React DevTools он виден как `ForwardRef(SuggestFieldMobileDropdownBase)`,
+  и переименование наблюдаемо для потребителя.
+- `SuggestField` — `Object.assign(SuggestFieldBase, { Input: FormFieldInput })`. Дженерик
+  сохраняется только у самой функции; `SuggestField.Input` — часть публичного API.
+- **Мобильная ветка получает не все props.** `SuggestField.tsx` передаёт в `SuggestFieldMobile`
+  явный whitelist, тогда как в `SuggestFieldDesktop` уходит `{...props}`. На мобильной ширине
+  до поля не доходят `className`, `id`, `data-test-id`, `active` и `renderInput`. Расширение
+  списка меняет наблюдаемое поведение — только по решению мейнтейнера.
+- **`onClear` на мобильном варианте работает иначе:** обработчик вешается на `FormFieldClear`
+  напрямую, без сброса `value` и фильтра, которые делает десктоп. Выравнивание — изменение
+  поведения, а не рефакторинг.
+- Видимость десктопного списка синхронизируется **во время рендера** (`if (inputFocused) {...}`),
+  а не в `useEffect`. Так требует правило `react-hooks/set-state-in-effect`; возврат к эффекту
+  вернёт и ошибку линтера, и лишний кадр рендера.
+- **`options` — жёсткий инвариант, рантайм-подстраховки нет.** Оба дропдауна делают `options.map`
+  без `?.`: prop обязателен по типу, а родитель ещё до рендера списка читает `options.length`, так
+  что `undefined` упал бы всё равно выше. JS-потребитель без типов, передавший `options={undefined}`,
+  получит TypeError, а не пустой список — это сознательное решение, а не упущение.
+- `id` выпадающего списка генерируется через `uniqueId()` из `lodash-es`, а не `React.useId` —
+  ветка `release-0` собирается на React 17.
+- Ширина выпадающего списка жёстко `EDropdownWidth.TARGET` — список всегда по ширине поля.
+- Выбор клавиатурой — **только `Enter`**: `keyCodesForSelection={[EVENT_KEY_CODES.ENTER]}`
+  сужает дефолт `DropdownListItem` (`Space` + `Enter`), иначе пробел в поисковом запросе
+  выбирал бы опцию вместо ввода пробела.
+- `mousedown` по выпадающему списку отменяется (`preventDefault`) — иначе поле ввода потеряло бы
+  фокус до того, как отработает выбор опции.
+- Суффиксы `data-test-id` берутся из `DataTestId` и используются в e2e — не менять:
+  поле ввода `{dataTestId}__input`, выпадающий список `{dataTestId}__dropdown`, элемент списка
+  `{dataTestId}__dropdown__item`, тело подсказки `{dataTestId}__tooltip`. Все они появляются,
+  только если потребитель передал `data-test-id`.
+- Кастомный `renderDropdownListItem` **не получит ref**: тип рендер-функции — обычная функция,
+  а `DropdownList` клонирует детей и вешает на них ref для клавиатурной навигации. React напишет
+  предупреждение, стрелочная навигация по такому списку работать не будет.
 
 ---
 
 ## Accessibility
 
-- `role="combobox"` / `aria-controls` / `aria-expanded` / `aria-activedescendant` проставляются в Desktop-реализации (`SuggestFieldDesktop`) на input'е.
-- `dropdownListId` передаётся в `DropdownList` (`role="listbox"`) и используется как `aria-controls`.
-- Escape закрывает dropdown (`isKey(event.key, "ESCAPE")`).
-- Mobile: полноэкранный лист с явным focus management на input.
-- `onClear` — опционально; если передан, рисуется `FormFieldClear` кнопка с осмысленной ariaLabel (переопределяется через `inputProps`).
+Поле ввода — `role="combobox"` с `aria-autocomplete="list"`. Компонент сам проставляет:
+
+- `aria-expanded` — открыт ли список. Считается как `dropdownOpen && options.length !== 0`,
+  поэтому при пустом `options` остаётся `false`, даже если внутреннее состояние «открыто».
+- `aria-controls` — `id` выпадающего списка, общий с `DropdownList`.
+- `aria-activedescendant` — `id` опции, выделенной стрелками. Значение приходит из
+  `DropdownListContext`, который `SuggestFieldDesktop` предоставляет, а `DropdownList` заполняет.
+  Сбрасывается при вводе текста и при закрытии списка.
+
+Клавиатура: `ArrowUp` / `ArrowDown` — перемещение по списку (`DropdownList`), `Enter` — выбор
+опции, `Escape` — закрытие списка со `stopPropagation`, чтобы событие не закрыло ещё и модальное
+окно вокруг. `Escape` при закрытом списке всплывает наверх.
+
+Подсказка (`tooltipHint`) рендерится в `Tooltip` и на десктопе показывается только пока поле
+в фокусе и `status !== EFormFieldStatus.DISABLED`. Текст подсказки, `label` и `placeholder`
+передаёт потребитель — библиотека мультиязычная и строк не хардкодит.
+
+Мобильный вариант: поле-триггер `readOnly` с тем же `role="combobox"` и `aria-expanded`;
+список внутри дропдауна — `role="listbox"` с опциями `role="option"` и `aria-selected`.
 
 ---
 
 ## Связанные компоненты
 
-- `Suggest` — headless-основа (TODO: SuggestField должен переехать на него).
-- `SelectField` — статический dropdown.
-- `Dropdown` / `DropdownList` / `DropdownListItem` — UI списка.
-- `TextField` — родительский тип props.
-- `MobileView` — адаптивная обёртка.
-- `FormFieldInput`, `FormFieldClear`, `Tooltip`, `LoaderSmall` — внутренние зависимости.
+- `Suggest` — headless-основа той же задачи: состояние и контекст без разметки. `SuggestField`
+  на него **не переведён** и держит собственную реализацию состояния (в `SuggestField.tsx`
+  стоит `TODO: Переписать через useSuggest`).
+- `SelectField` — та же задача с другим компромиссом: список фиксированный, ввода и фильтрации
+  нет. Сюда же примыкают `MultiselectField` и `SelectExtendedField` — все трое ссылаются на
+  `SuggestField` со своей стороны.
+- `TextField` — `ISuggestFieldProps` наследует его props (`Omit<ITextFieldProps, "onSelect">`),
+  а разметку поля даёт общий `TextFieldBase`.
+- `FormField` — источник `FormFieldInput` (поле ввода и `SuggestField.Input`), `FormFieldClear`
+  (кнопка очистки) и статусов `EFormFieldStatus`.
+- `Dropdown` — выпадающий список: `DropdownDesktop` + `DropdownList` + `DropdownListItem` на
+  десктопе, `DropdownMobile*` в полноэкранном мобильном варианте. `ISuggestFieldDesktopDropdownProps`
+  наследует `IDropdownDesktopProps`.
+- `Tooltip` — подсказка `tooltipHint` у десктопного поля. В `related` не вынесен: односторонний
+  контракт по рендеру, а ориентир 2–5 имён уже выбран более полезными адресатами.
+- `MobileView` — переключает десктопный и мобильный варианты по ширине экрана. В `related` не
+  вынесен по той же причине.
+- `SuggestFieldDesktop` / `SuggestFieldMobile` — платформенные варианты, экспортируются из barrel
+  и принимают те же props. Отдельных AI.md не имеют: их поведение описано выше. Бери их напрямую,
+  только если адаптивное переключение `MobileView` не нужно.
+- `SuggestFieldDesktopDropdown`, `SuggestFieldMobileDropdown`, `SuggestFieldMobileDropdownHint` —
+  внутренние части композиции. Экспортируются из barrel, чтобы их можно было переиспользовать
+  в `renderDropdown`, собственных AI.md не имеют.
 
 ---
 
 ## Stories
 
 Основные истории: `stories/SuggestField/SuggestField.stories.tsx`
-Примеры: `stories/SuggestField/examples/`
+Файлы примеров: `stories/SuggestField/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `size`, `status`, `label`, `placeholder`, `tooltipHint`, `loading`, `dropdownListLoading`, `clearInputOnFocus` и наличия префикса / постфикса / описания |
+| `Default` | `DefaultExample.tsx` | Базовая связка: фильтрация `options` по вводу и `tooltipOpen` при пустом результате |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG |
+| `Statuses` | `StatusesExample.tsx` | Все значения `EFormFieldStatus`: default, disabled, error, warning |
+| `Loading` | `LoadingExample.tsx` | Лоадер в постфиксе поля при `loading` |
+| `Production` | `ProductionExample.tsx` | Боевая композиция: `HelpBox` в постфиксе, подсказка со ссылкой |
+| `CustomOptions` | `CustomOptionsExample.tsx` | Опции с `content`: иконка, название и категория в строке списка |
+| `Async` | `AsyncExample.tsx` | Асинхронный поиск: debounce, `loading`, постраничная догрузка по `onScrollEnd` и `dropdownListLoading` |
+| `VisualTests` | `DefaultExample.tsx` | Скриншот-регрессия: рендерит `DefaultExample`, а `play` открывает выпадающий список кликом по полю |
 
 ---
 
@@ -154,4 +237,874 @@ Re-export `FormFieldInput` — для удобства доступа.
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-23 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/SuggestField/examples/DefaultExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    SuggestField,
+    useMobileView,
+    ISuggestFieldOption,
+    EComponentSize,
+    EFormFieldStatus,
+} from "@sberbusiness/triplex-next";
+
+const FOOD_NAMES = [
+    "Mushroom",
+    "Tomato",
+    "Eggplant",
+    "Grapes",
+    "Melon",
+    "Watermelon",
+    "Tangerine",
+    "Lemon",
+    "Banana",
+    "Pineapple",
+    "Red Apple",
+    "Green Apple",
+    "Pear",
+    "Peach",
+    "Cherries",
+    "Strawberry",
+] as const;
+
+const FOOD_OPTIONS: ISuggestFieldOption[] = FOOD_NAMES.map((item, index) => ({
+    id: `suggest-field-option-${index}`,
+    label: item,
+}));
+
+const getFilteredOptions = (query: string): ISuggestFieldOption[] =>
+    FOOD_OPTIONS.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase()));
+
+export const DefaultExample = () => {
+    const [value, setValue] = useState<ISuggestFieldOption | undefined>(undefined);
+    const [options, setOptions] = useState<ISuggestFieldOption[]>([]);
+    const [inputPristine, setInputPristine] = useState(true);
+    const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+
+    const adaptive = useMobileView();
+
+    const reset = (newOptions: typeof options) => {
+        setOptions(newOptions);
+        setInputPristine(true);
+        setTooltipOpen(false);
+    };
+
+    const handleFilter = (inputValue: string) => {
+        setInputPristine(false);
+
+        if (inputValue.length === 0) {
+            setOptions(FOOD_OPTIONS);
+            setTooltipOpen(false);
+        } else {
+            const filteredOptions = getFilteredOptions(inputValue);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0);
+        }
+    };
+
+    const handleSelect = (nextValue: typeof value) => {
+        setValue(nextValue);
+        reset([]);
+    };
+
+    const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+        if (!adaptive) {
+            reset([]);
+        }
+    };
+
+    const handleInputMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {
+        if (options.length === 0) {
+            const query = event.currentTarget.value;
+            const filteredOptions = getFilteredOptions(inputPristine ? "" : query);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0 && query.length !== 0);
+        } else if (adaptive) {
+            reset(FOOD_OPTIONS);
+        }
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <SuggestField
+                value={value}
+                options={options}
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                tooltipOpen={tooltipOpen}
+                onFilter={handleFilter}
+                onSelect={handleSelect}
+                inputProps={{
+                    onBlur: handleInputBlur,
+                    onMouseDown: handleInputMouseDown,
+                }}
+            />
+        </div>
+    );
+};
+```
+
+### Sizes
+
+`stories/SuggestField/examples/SizesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    SuggestField,
+    useMobileView,
+    ISuggestFieldOption,
+    EComponentSize,
+    EFormFieldStatus,
+} from "@sberbusiness/triplex-next";
+
+interface ISizeItemProps {
+    size: EComponentSize;
+}
+
+const FOOD_NAMES = [
+    "Mushroom",
+    "Tomato",
+    "Eggplant",
+    "Grapes",
+    "Melon",
+    "Watermelon",
+    "Tangerine",
+    "Lemon",
+    "Banana",
+    "Pineapple",
+    "Red Apple",
+    "Green Apple",
+    "Pear",
+    "Peach",
+    "Cherries",
+    "Strawberry",
+] as const;
+
+const FOOD_OPTIONS: ISuggestFieldOption[] = FOOD_NAMES.map((item, index) => ({
+    id: `suggest-field-option-${index}`,
+    label: item,
+}));
+
+const getFilteredOptions = (query: string): ISuggestFieldOption[] =>
+    FOOD_OPTIONS.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase()));
+
+const SizeItem = ({ size }: ISizeItemProps) => {
+    const [value, setValue] = useState<ISuggestFieldOption | undefined>(undefined);
+    const [options, setOptions] = useState<ISuggestFieldOption[]>([]);
+    const [inputPristine, setInputPristine] = useState(true);
+    const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+
+    const adaptive = useMobileView();
+
+    const reset = (newOptions: typeof options) => {
+        setOptions(newOptions);
+        setInputPristine(true);
+        setTooltipOpen(false);
+    };
+
+    const handleFilter = (inputValue: string) => {
+        setInputPristine(false);
+
+        if (inputValue.length === 0) {
+            setOptions(FOOD_OPTIONS);
+            setTooltipOpen(false);
+        } else {
+            const filteredOptions = getFilteredOptions(inputValue);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0);
+        }
+    };
+
+    const handleSelect = (nextValue: typeof value) => {
+        setValue(nextValue);
+        reset([]);
+    };
+
+    const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+        if (!adaptive) {
+            reset([]);
+        }
+    };
+
+    const handleInputMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {
+        if (options.length === 0) {
+            const query = event.currentTarget.value;
+            const filteredOptions = getFilteredOptions(inputPristine ? "" : query);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0 && query.length !== 0);
+        } else if (adaptive) {
+            reset(FOOD_OPTIONS);
+        }
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{size.toUpperCase()}</div>
+            <SuggestField
+                value={value}
+                options={options}
+                size={size}
+                status={EFormFieldStatus.DEFAULT}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                tooltipOpen={tooltipOpen}
+                onFilter={handleFilter}
+                onSelect={handleSelect}
+                inputProps={{
+                    onBlur: handleInputBlur,
+                    onMouseDown: handleInputMouseDown,
+                }}
+            />
+        </div>
+    );
+};
+
+const SIZES = Object.values(EComponentSize);
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {SIZES.map((size) => (
+            <SizeItem key={size} size={size} />
+        ))}
+    </div>
+);
+```
+
+### Statuses
+
+`stories/SuggestField/examples/StatusesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    SuggestField,
+    useMobileView,
+    ISuggestFieldOption,
+    EComponentSize,
+    EFormFieldStatus,
+} from "@sberbusiness/triplex-next";
+
+interface IStatusItemProps {
+    status: EFormFieldStatus;
+}
+
+const FOOD_NAMES = [
+    "Mushroom",
+    "Tomato",
+    "Eggplant",
+    "Grapes",
+    "Melon",
+    "Watermelon",
+    "Tangerine",
+    "Lemon",
+    "Banana",
+    "Pineapple",
+    "Red Apple",
+    "Green Apple",
+    "Pear",
+    "Peach",
+    "Cherries",
+    "Strawberry",
+] as const;
+
+const FOOD_OPTIONS: ISuggestFieldOption[] = FOOD_NAMES.map((item, index) => ({
+    id: `suggest-field-option-${index}`,
+    label: item,
+}));
+
+const getFilteredOptions = (query: string): ISuggestFieldOption[] =>
+    FOOD_OPTIONS.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase()));
+
+const StatusItem = ({ status }: IStatusItemProps) => {
+    const [value, setValue] = useState<ISuggestFieldOption | undefined>(undefined);
+    const [options, setOptions] = useState<ISuggestFieldOption[]>([]);
+    const [inputPristine, setInputPristine] = useState(true);
+    const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+
+    const adaptive = useMobileView();
+
+    const reset = (newOptions: typeof options) => {
+        setOptions(newOptions);
+        setInputPristine(true);
+        setTooltipOpen(false);
+    };
+
+    const handleFilter = (inputValue: string) => {
+        setInputPristine(false);
+
+        if (inputValue.length === 0) {
+            setOptions(FOOD_OPTIONS);
+            setTooltipOpen(false);
+        } else {
+            const filteredOptions = getFilteredOptions(inputValue);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0);
+        }
+    };
+
+    const handleSelect = (nextValue: typeof value) => {
+        setValue(nextValue);
+        reset([]);
+    };
+
+    const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+        if (!adaptive) {
+            reset([]);
+        }
+    };
+
+    const handleInputMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {
+        if (options.length === 0) {
+            const query = event.currentTarget.value;
+            const filteredOptions = getFilteredOptions(inputPristine ? "" : query);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0 && query.length !== 0);
+        } else if (adaptive) {
+            reset(FOOD_OPTIONS);
+        }
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{status.toUpperCase()}</div>
+            <SuggestField
+                value={value}
+                options={options}
+                size={EComponentSize.LG}
+                status={status}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                tooltipOpen={tooltipOpen}
+                onFilter={handleFilter}
+                onSelect={handleSelect}
+                inputProps={{
+                    onBlur: handleInputBlur,
+                    onMouseDown: handleInputMouseDown,
+                }}
+            />
+        </div>
+    );
+};
+
+const STATUSES = Object.values(EFormFieldStatus);
+
+export const StatusesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {STATUSES.map((status) => (
+            <StatusItem key={status} status={status} />
+        ))}
+    </div>
+);
+```
+
+### Loading
+
+`stories/SuggestField/examples/LoadingExample.tsx`
+
+```tsx
+import React from "react";
+import { SuggestField, EComponentSize, EFormFieldStatus } from "@sberbusiness/triplex-next";
+
+export const LoadingExample = () => {
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <SuggestField
+                value={undefined}
+                options={[]}
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                tooltipOpen={false}
+                loading={true}
+                onFilter={() => {}}
+                onSelect={() => {}}
+                inputProps={{}}
+            />
+        </div>
+    );
+};
+```
+
+### Production
+
+`stories/SuggestField/examples/ProductionExample.tsx`
+
+```tsx
+import React, { useState, useRef } from "react";
+import {
+    SuggestField,
+    HelpBox,
+    Text,
+    Link,
+    useMobileView,
+    ISuggestFieldOption,
+    EComponentSize,
+    EFormFieldStatus,
+    ETooltipSize,
+    ETextSize,
+    EFontType,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon24 } from "@sberbusiness/icons-next";
+
+const FOOD_NAMES = [
+    "Mushroom",
+    "Tomato",
+    "Eggplant",
+    "Grapes",
+    "Melon",
+    "Watermelon",
+    "Tangerine",
+    "Lemon",
+    "Banana",
+    "Pineapple",
+    "Red Apple",
+    "Green Apple",
+    "Pear",
+    "Peach",
+    "Cherries",
+    "Strawberry",
+] as const;
+
+const FOOD_OPTIONS: ISuggestFieldOption[] = FOOD_NAMES.map((item, index) => ({
+    id: `suggest-field-option-${index}`,
+    label: item,
+}));
+
+const getFilteredOptions = (query: string): ISuggestFieldOption[] =>
+    FOOD_OPTIONS.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase()));
+
+export const ProductionExample = () => {
+    const [value, setValue] = useState<ISuggestFieldOption | undefined>(undefined);
+    const [options, setOptions] = useState<ISuggestFieldOption[]>([]);
+    const [inputPristine, setInputPristine] = useState(true);
+    const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const adaptive = useMobileView();
+
+    const reset = (newOptions: typeof options) => {
+        setOptions(newOptions);
+        setInputPristine(true);
+        setTooltipOpen(false);
+    };
+
+    const handleFilter = (inputValue: string) => {
+        setInputPristine(false);
+
+        if (inputValue.length === 0) {
+            setValue(undefined);
+            setOptions(FOOD_OPTIONS);
+            setTooltipOpen(false);
+        } else {
+            const filteredOptions = getFilteredOptions(inputValue);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0);
+        }
+    };
+
+    const handleSelect = (nextValue: typeof value) => {
+        setValue(nextValue);
+        reset([]);
+    };
+
+    const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+        if (!adaptive) {
+            reset([]);
+        }
+    };
+
+    const handleInputMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {
+        if (options.length === 0) {
+            const query = event.currentTarget.value;
+            const filteredOptions = getFilteredOptions(inputPristine ? "" : query);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0 && query.length !== 0);
+        } else if (adaptive) {
+            reset(FOOD_OPTIONS);
+        }
+    };
+
+    const handleClear: React.MouseEventHandler<HTMLButtonElement> = () => {
+        inputRef.current?.focus();
+    };
+
+    const handleLinkClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+        event.preventDefault();
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <SuggestField
+                value={value}
+                options={options}
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                tooltipOpen={tooltipOpen}
+                onFilter={handleFilter}
+                onSelect={handleSelect}
+                onClear={handleClear}
+                inputProps={{
+                    onBlur: handleInputBlur,
+                    onMouseDown: handleInputMouseDown,
+                    ref: inputRef,
+                }}
+                prefix={<DefaulticonStrokePrdIcon24 paletteIndex={5} />}
+                postfix={
+                    <React.Fragment>
+                        <DefaulticonStrokePrdIcon24 paletteIndex={5} />
+                        <HelpBox tooltipSize={ETooltipSize.SM}>Helpful details appear here</HelpBox>
+                    </React.Fragment>
+                }
+                description={
+                    <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+                        (21) Description{" "}
+                        <Link href="#" onClick={handleLinkClick}>
+                            Link text
+                        </Link>
+                    </Text>
+                }
+            />
+        </div>
+    );
+};
+```
+
+### CustomOptions
+
+`stories/SuggestField/examples/CustomOptionsExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    SuggestField,
+    Text,
+    useMobileView,
+    ISuggestFieldOption,
+    EComponentSize,
+    EFormFieldStatus,
+    ETextSize,
+    EFontType,
+} from "@sberbusiness/triplex-next";
+
+const FOOD_DATA = [
+    { label: "Mushroom", icon: "🍄", category: "Vegetable" },
+    { label: "Tomato", icon: "🍅", category: "Vegetable" },
+    { label: "Eggplant", icon: "🍆", category: "Vegetable" },
+    { label: "Grapes", icon: "🍇", category: "Fruit" },
+    { label: "Melon", icon: "🍈", category: "Fruit" },
+    { label: "Watermelon", icon: "🍉", category: "Fruit" },
+    { label: "Tangerine", icon: "🍊", category: "Fruit" },
+    { label: "Lemon", icon: "🍋", category: "Fruit" },
+    { label: "Banana", icon: "🍌", category: "Fruit" },
+    { label: "Pineapple", icon: "🍍", category: "Fruit" },
+    { label: "Red apple", icon: "🍎", category: "Fruit" },
+    { label: "Green apple", icon: "🍏", category: "Fruit" },
+    { label: "Pear", icon: "🍐", category: "Fruit" },
+    { label: "Peach", icon: "🍑", category: "Fruit" },
+    { label: "Cherries", icon: "🍒", category: "Fruit" },
+    { label: "Strawberry", icon: "🍓", category: "Fruit" },
+] as const;
+
+const FOOD_OPTIONS: ISuggestFieldOption[] = FOOD_DATA.map((item, index) => ({
+    id: `suggest-field-option-${index}`,
+    label: item.label,
+    content: (
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span>{item.icon}</span>
+            <Text size={ETextSize.B2} type={EFontType.PRIMARY}>
+                {item.label}
+            </Text>
+            <Text size={ETextSize.B3} type={EFontType.SECONDARY} style={{ marginLeft: "auto" }}>
+                {item.category}
+            </Text>
+        </div>
+    ),
+}));
+
+const getFilteredOptions = (query: string): ISuggestFieldOption[] =>
+    FOOD_OPTIONS.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase()));
+
+export const CustomOptionsExample = () => {
+    const [value, setValue] = useState<ISuggestFieldOption | undefined>(undefined);
+    const [options, setOptions] = useState<ISuggestFieldOption[]>([]);
+    const [inputPristine, setInputPristine] = useState(true);
+    const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+
+    const adaptive = useMobileView();
+
+    const reset = (newOptions: typeof options) => {
+        setOptions(newOptions);
+        setInputPristine(true);
+        setTooltipOpen(false);
+    };
+
+    const handleFilter = (inputValue: string) => {
+        setInputPristine(false);
+
+        if (inputValue.length === 0) {
+            setOptions(FOOD_OPTIONS);
+            setTooltipOpen(false);
+        } else {
+            const filteredOptions = getFilteredOptions(inputValue);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0);
+        }
+    };
+
+    const handleSelect = (nextValue: typeof value) => {
+        setValue(nextValue);
+        reset([]);
+    };
+
+    const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+        if (!adaptive) {
+            reset([]);
+        }
+    };
+
+    const handleInputMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {
+        if (options.length === 0) {
+            const query = event.currentTarget.value;
+            const filteredOptions = getFilteredOptions(inputPristine ? "" : query);
+
+            setOptions(filteredOptions);
+            setTooltipOpen(filteredOptions.length === 0 && query.length !== 0);
+        } else if (adaptive) {
+            reset(FOOD_OPTIONS);
+        }
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <SuggestField
+                value={value}
+                options={options}
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                tooltipOpen={tooltipOpen}
+                onFilter={handleFilter}
+                onSelect={handleSelect}
+                inputProps={{
+                    onBlur: handleInputBlur,
+                    onMouseDown: handleInputMouseDown,
+                }}
+            />
+        </div>
+    );
+};
+```
+
+### Async
+
+`stories/SuggestField/examples/AsyncExample.tsx`
+
+```tsx
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import {
+    SuggestField,
+    useMobileView,
+    ISuggestFieldOption,
+    EComponentSize,
+    EFormFieldStatus,
+} from "@sberbusiness/triplex-next";
+import { debounce } from "lodash-es";
+
+const FOOD_NAMES = [
+    "Mushroom",
+    "Tomato",
+    "Eggplant",
+    "Grapes",
+    "Melon",
+    "Watermelon",
+    "Tangerine",
+    "Lemon",
+    "Banana",
+    "Pineapple",
+    "Red Apple",
+    "Green Apple",
+    "Pear",
+    "Peach",
+    "Cherries",
+    "Strawberry",
+] as const;
+
+const FOOD_OPTIONS: ISuggestFieldOption[] = FOOD_NAMES.map((item, index) => ({
+    id: `suggest-field-option-${index}`,
+    label: item,
+}));
+
+const getFilteredOptions = (query: string): ISuggestFieldOption[] =>
+    FOOD_OPTIONS.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase()));
+
+export const AsyncExample = () => {
+    const [value, setValue] = useState<ISuggestFieldOption | undefined>(undefined);
+    const [options, setOptions] = useState<ISuggestFieldOption[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+    const [dropdownListLoading, setDropdownListLoading] = useState<boolean>(false);
+
+    const filteredOptionsRef = useRef<typeof options>([]);
+    const lastSearchQueryRef = useRef<string>("");
+    const activeRequestRef = useRef<boolean>(false);
+    const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const adaptive = useMobileView();
+
+    const debouncedFilter = useRef(
+        // eslint-disable-next-line react-hooks/refs
+        debounce((inputValue: string) => {
+            if (!activeRequestRef.current) return;
+
+            const filteredOptions = getFilteredOptions(inputValue);
+
+            filteredOptionsRef.current = filteredOptions;
+            lastSearchQueryRef.current = inputValue;
+
+            setOptions(filteredOptions.slice(0, 6));
+            setLoading(false);
+            setTooltipOpen(filteredOptions.length === 0);
+        }, 1000),
+    ).current;
+
+    const stopTimers = useCallback(() => {
+        debouncedFilter.cancel();
+        clearTimeout(scrollTimeoutRef.current);
+    }, [debouncedFilter]);
+
+    const stopLoading = () => {
+        stopTimers();
+        setLoading(false);
+        setDropdownListLoading(false);
+    };
+
+    const reset = () => {
+        filteredOptionsRef.current = [];
+        lastSearchQueryRef.current = "";
+        activeRequestRef.current = false;
+        stopLoading();
+        setOptions([]);
+        setTooltipOpen(false);
+    };
+
+    const startSearch = (query: string) => {
+        stopTimers();
+        activeRequestRef.current = true;
+
+        setTooltipOpen(false);
+        setLoading(true);
+        setDropdownListLoading(false);
+        debouncedFilter(query);
+    };
+
+    const handleFilter = (inputValue: string) => {
+        if (inputValue.length === 0) {
+            return reset();
+        }
+
+        if (inputValue !== lastSearchQueryRef.current) {
+            startSearch(inputValue);
+        }
+    };
+
+    const handleSelect = (nextValue: typeof value) => {
+        setValue(nextValue);
+        reset();
+    };
+
+    const handleScrollEnd = () => {
+        const filteredOptions = filteredOptionsRef.current;
+
+        if (dropdownListLoading || options.length === 0 || options.length === filteredOptions.length) {
+            return;
+        }
+
+        clearTimeout(scrollTimeoutRef.current);
+        setDropdownListLoading(true);
+
+        scrollTimeoutRef.current = setTimeout(() => {
+            setOptions((prevOptions) => {
+                const nextChunk = filteredOptions.slice(prevOptions.length, prevOptions.length + 6);
+                return [...prevOptions, ...nextChunk];
+            });
+            setDropdownListLoading(false);
+        }, 1000);
+    };
+
+    const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+        if (adaptive === false) {
+            reset();
+        }
+    };
+
+    const handleInputMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {
+        const query = event.currentTarget.value;
+
+        if (query.length !== 0 && !loading && query !== lastSearchQueryRef.current) {
+            startSearch(query);
+        }
+    };
+
+    useEffect(() => {
+        return () => {
+            activeRequestRef.current = false;
+            stopTimers();
+        };
+    }, [stopTimers]);
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <SuggestField
+                value={value}
+                options={options}
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                label="Label"
+                placeholder="Type to proceed"
+                tooltipHint="No matches found."
+                loading={loading}
+                tooltipOpen={tooltipOpen}
+                onFilter={handleFilter}
+                onSelect={handleSelect}
+                onScrollEnd={handleScrollEnd}
+                inputProps={{
+                    onBlur: handleInputBlur,
+                    onMouseDown: handleInputMouseDown,
+                }}
+            />
+        </div>
+    );
+};
+```
+