@snack-uikit/fields 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.27.0 (2024-09-23)
+
+
+### Bug Fixes
+
+* **DPS-12873:** selectedOptionFormatter with predefined value ([7a8d335](https://github.com/cloud-ru-tech/snack-uikit/commit/7a8d33574a6205a56aa742aaa052d07d30f99eb0))
+* **PDS-480:** remove direct usage of browser api elements ([1231ff7](https://github.com/cloud-ru-tech/snack-uikit/commit/1231ff7ab7a1b210b579a7b694633ef23bffcf44))
+* **PDS-480:** replace useLayoutEffect -> useIsomorphicLayoutEffect for ssr ([21aa9ad](https://github.com/cloud-ru-tech/snack-uikit/commit/21aa9ad9f113e465766339d396924357ccb1d432))
+
+
+### Features
+
+* **PDS-000:** add resetSearchOnOptionSelection property ([1fe3640](https://github.com/cloud-ru-tech/snack-uikit/commit/1fe3640b23a3da35c6b949c2bdc0796073b51425))
+
+
+
+
+
 # 0.26.0 (2024-09-17)
 
 

package/README.md

@@ -368,31 +368,32 @@ FieldStepper в основном предназначен для работы с
 | value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
 | defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
-| pinTop | `OptionProps[]` | - |  |
-| pinBottom | `OptionProps[]` | - |  |
-| searchable | `boolean` | - |  |
+| open | `boolean` | - |  |
+| onOpenChange | `(open: boolean) => void` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| footer | `ReactNode` | - |  |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
+| pinTop | `OptionProps[]` | - |  |
+| pinBottom | `OptionProps[]` | - |  |
+| footer | `ReactNode` | - |  |
 | search | `SearchState` | - |  |
-| autocomplete | `boolean` | - |  |
-| addOptionByEnter | `boolean` | - |  |
-| open | `boolean` | - |  |
-| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
-| onOpenChange | `(open: boolean) => void` | - |  |
-| selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| searchable | `boolean` | - |  |
+| autocomplete | `boolean` | - |  |
+| addOptionByEnter | `boolean` | - |  |
+| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
+| selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | selection | "single" \| "multiple" | - |  |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
 | removeByBackspace | `boolean` | - |  |
+| resetSearchOnOptionSelection | `boolean` | - | Поведение строки поиска при выборе опции из списка |
 ## FieldStepper
 ### Props
 | name | type | default value | description |

package/dist/components/FieldDate/hooks/useDateField.js

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react';
+import { isBrowser } from '@snack-uikit/utils';
 import { DEFAULT_LOCALE, MASK, SlotKey, SLOTS, SLOTS_PLACEHOLDER } from '../constants';
 import { getNextSlotKey, getPrevSlotKey, getSlotKey } from '../utils';
 import { useDateFieldHelpers } from './useDateFieldHelpers';
@@ -12,7 +13,7 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         if (!inputRef.current || readonly) {
             return;
         }
-        if (document.activeElement !== inputRef.current) {
+        if (isBrowser() && document.activeElement !== inputRef.current) {
             focusSlotRef.current = focusSlot || SlotKey.Day;
             inputRef.current.focus();
             return;

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -22,6 +22,7 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     addOptionByEnter?: boolean;
     open?: boolean;
     enableFuzzySearch?: boolean;
+    resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 } & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
@@ -32,7 +32,7 @@ const defaultSelectedOptionFormatter = item =>
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectMultiple = forwardRef((props, ref) => {
     var _a;
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "onOpenChange", "selectedOptionFormatter"]);
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -43,7 +43,8 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
         onChange: onChangeProp,
     });
     const [{ selectedItems, items = [] }, setItems] = useState(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
-    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter }));
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter,
+        resetSearchOnOptionSelection }));
     useLayoutEffect(() => {
         setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
     }, [options, value]);
@@ -92,7 +93,7 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
         commonHandleOnKeyDown(onKeyDown)(e);
     };
     const handleOpenChange = (open) => {
-        if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+        if (isBrowser() && !readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
             if (!open) {
                 if (inputPlugRef.current) {

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -2,7 +2,7 @@ import { SelectedOptionFormatter } from './types';
 export declare const FieldSelectSingle: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
     loading?: boolean;
-} & Omit<import("@snack-uikit/list").SelectionSingleState, "mode"> & {
+} & Omit<import("@snack-uikit/list").SelectionSingleState, "mode"> & Omit<{
     'data-test-id'?: string;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
@@ -20,6 +20,7 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     addOptionByEnter?: boolean;
     open?: boolean;
     enableFuzzySearch?: boolean;
+    resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "resetSearchOnOptionSelection"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -12,10 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist } from '@snack-uikit/list';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
@@ -29,7 +29,6 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectSingle = forwardRef((props, ref) => {
-    var _a;
     const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
@@ -39,10 +38,7 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
         onChange: onChangeProp,
     });
     const [{ selectedItem, items = [] }, setItems] = useState(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
-    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        defaultValue: (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _a !== void 0 ? _a : '', selectedOptionFormatter }));
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: selectedOptionFormatter(selectedItem), selectedOptionFormatter }));
     const prevSelectedItem = useRef(selectedItem);
     useLayoutEffect(() => {
         setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
@@ -111,7 +107,7 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
         commonHandleOnKeyDown(onKeyDown)(e);
     };
     const handleOpenChange = (open) => {
-        if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+        if (isBrowser() && !readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
             if (!open) {
                 updateInputValue(selectedItem);

package/dist/components/FieldSelect/hooks.d.ts

@@ -22,8 +22,9 @@ export declare function useButtons({ readonly, showClearButton, showCopyButton,
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
     buttonsRefs: (Element | null)[];
 };
-export declare function useSearchInput({ value, onChange, defaultValue, selectedOptionFormatter, }: SearchState & {
+export declare function useSearchInput({ value, onChange, defaultValue, selectedOptionFormatter, resetSearchOnOptionSelection, }: SearchState & {
     selectedOptionFormatter: SelectedOptionFormatter;
+    resetSearchOnOptionSelection?: boolean;
 }): {
     inputValue: string;
     setInputValue: (value: any, ...args: any[]) => ReturnType<Handler> | void;

package/dist/components/FieldSelect/hooks.js

@@ -51,16 +51,16 @@ export function useButtons({ readonly, showClearButton, showCopyButton, size, on
     });
     return { buttons, inputKeyDownNavigationHandler, buttonsRefs };
 }
-export function useSearchInput({ value, onChange, defaultValue, selectedOptionFormatter, }) {
+export function useSearchInput({ value, onChange, defaultValue, selectedOptionFormatter, resetSearchOnOptionSelection = true, }) {
     const [inputValue = '', setInputValue] = useValueControl({ value, onChange, defaultValue });
     const prevInputValue = useRef(inputValue);
     const updateInputValue = useCallback((selectedItem) => {
         const newInputValue = selectedOptionFormatter(selectedItem);
-        if (inputValue !== newInputValue || prevInputValue.current !== newInputValue) {
+        if (resetSearchOnOptionSelection && (inputValue !== newInputValue || prevInputValue.current !== newInputValue)) {
             setInputValue(newInputValue);
             prevInputValue.current = newInputValue;
         }
-    }, [inputValue, selectedOptionFormatter, setInputValue]);
+    }, [inputValue, resetSearchOnOptionSelection, selectedOptionFormatter, setInputValue]);
     return { inputValue, setInputValue, prevInputValue, onInputValueChange: setInputValue, updateInputValue };
 }
 export function useHandleDeleteItem(setValue) {

package/dist/components/FieldSelect/types.d.ts

@@ -62,10 +62,12 @@ type FiledSelectCommonProps = WithSupportProps<{
     open?: boolean;
     /** Включить нечеткий поиск  */
     enableFuzzySearch?: boolean;
+    /** Поведение строки поиска при выборе опции из списка */
+    resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 }> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered' | 'untouchableScrollbars'>;
-export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
+export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & Omit<FiledSelectCommonProps, 'resetSearchOnOptionSelection'>;
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;
 } & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;

package/dist/helperComponents/TextArea/TextArea.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
-import { forwardRef, useLayoutEffect, useState, } from 'react';
+import { forwardRef, useState, } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
 import styles from './styles.module.css';
 export const TextArea = forwardRef((_a, ref) => {
     var { name, value = '', onChange, placeholder, id, className, disabled = false, readonly = false, autoComplete = false, maxLength, onFocus, onBlur, onKeyDown, tabIndex, minRows = 3 } = _a, rest = __rest(_a, ["name", "value", "onChange", "placeholder", "id", "className", "disabled", "readonly", "autoComplete", "maxLength", "onFocus", "onBlur", "onKeyDown", "tabIndex", "minRows"]);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,19 +32,19 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.4",
-    "@snack-uikit/calendar": "0.7.10",
-    "@snack-uikit/dropdown": "0.2.5",
-    "@snack-uikit/icons": "0.22.0",
-    "@snack-uikit/input-private": "3.2.0",
-    "@snack-uikit/list": "0.16.1",
-    "@snack-uikit/scroll": "0.6.0",
-    "@snack-uikit/skeleton": "0.3.4",
-    "@snack-uikit/slider": "0.1.16",
-    "@snack-uikit/tag": "0.9.8",
-    "@snack-uikit/tooltip": "0.13.8",
-    "@snack-uikit/truncate-string": "0.4.21",
-    "@snack-uikit/utils": "3.3.0",
+    "@snack-uikit/button": "0.17.5",
+    "@snack-uikit/calendar": "0.7.11",
+    "@snack-uikit/dropdown": "0.2.6",
+    "@snack-uikit/icons": "0.22.1",
+    "@snack-uikit/input-private": "3.2.1",
+    "@snack-uikit/list": "0.16.2",
+    "@snack-uikit/scroll": "0.6.1",
+    "@snack-uikit/skeleton": "0.3.5",
+    "@snack-uikit/slider": "0.1.17",
+    "@snack-uikit/tag": "0.9.9",
+    "@snack-uikit/tooltip": "0.13.9",
+    "@snack-uikit/truncate-string": "0.4.22",
+    "@snack-uikit/utils": "3.4.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "3.3.3",
     "fuzzy-search": "3.2.1",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "b5dbc02c777773140b597e9c3268a9424f8608d8"
+  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
 }

package/src/components/FieldDate/hooks/useDateField.ts

@@ -1,5 +1,7 @@
 import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject, useCallback, useMemo, useRef } from 'react';
 
+import { isBrowser } from '@snack-uikit/utils';
+
 import { DEFAULT_LOCALE, MASK, SlotKey, SLOTS, SLOTS_PLACEHOLDER } from '../constants';
 import { getNextSlotKey, getPrevSlotKey, getSlotKey } from '../utils';
 import { useDateFieldHelpers } from './useDateFieldHelpers';
@@ -32,7 +34,7 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         return;
       }
 
-      if (document.activeElement !== inputRef.current) {
+      if (isBrowser() && document.activeElement !== inputRef.current) {
         focusSlotRef.current = focusSlot || SlotKey.Day;
         inputRef.current.focus();
         return;

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -1,11 +1,11 @@
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useLayoutEffect, useRef, useState } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useRef, useState } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
 import { BaseItemProps, Droplist, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
@@ -48,6 +48,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     untouchableScrollbars = false,
     open: openProp,
     enableFuzzySearch = true,
+    resetSearchOnOptionSelection = true,
     onOpenChange,
     selectedOptionFormatter = defaultSelectedOptionFormatter,
     ...rest
@@ -73,6 +74,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     ...search,
     defaultValue: '',
     selectedOptionFormatter,
+    resetSearchOnOptionSelection,
   });
 
   useLayoutEffect(() => {
@@ -133,7 +135,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
   };
 
   const handleOpenChange = (open: boolean) => {
-    if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+    if (isBrowser() && !readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
       setOpen(open);
 
       if (!open) {

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -7,14 +7,13 @@ import {
   KeyboardEventHandler,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
@@ -75,9 +74,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
 
   const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput({
     ...search,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    defaultValue: selectedItem?.content.option ?? '',
+    defaultValue: selectedOptionFormatter(selectedItem),
     selectedOptionFormatter,
   });
 
@@ -168,7 +165,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
   };
 
   const handleOpenChange = (open: boolean) => {
-    if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+    if (isBrowser() && !readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
       setOpen(open);
 
       if (!open) {

package/src/components/FieldSelect/hooks.ts

@@ -106,7 +106,8 @@ export function useSearchInput({
   onChange,
   defaultValue,
   selectedOptionFormatter,
-}: SearchState & { selectedOptionFormatter: SelectedOptionFormatter }) {
+  resetSearchOnOptionSelection = true,
+}: SearchState & { selectedOptionFormatter: SelectedOptionFormatter; resetSearchOnOptionSelection?: boolean }) {
   const [inputValue = '', setInputValue] = useValueControl<string>({ value, onChange, defaultValue });
 
   const prevInputValue = useRef<string>(inputValue);
@@ -115,13 +116,13 @@ export function useSearchInput({
     (selectedItem?: ItemWithId) => {
       const newInputValue = selectedOptionFormatter(selectedItem);
 
-      if (inputValue !== newInputValue || prevInputValue.current !== newInputValue) {
+      if (resetSearchOnOptionSelection && (inputValue !== newInputValue || prevInputValue.current !== newInputValue)) {
         setInputValue(newInputValue);
 
         prevInputValue.current = newInputValue;
       }
     },
-    [inputValue, selectedOptionFormatter, setInputValue],
+    [inputValue, resetSearchOnOptionSelection, selectedOptionFormatter, setInputValue],
   );
 
   return { inputValue, setInputValue, prevInputValue, onInputValueChange: setInputValue, updateInputValue };
@@ -144,14 +145,13 @@ export function useHandleDeleteItem(setValue: Handler) {
       }
 
       if (isBaseOptionProps(item)) {
-        setValue(
-          (value: SelectionSingleValueType[]) =>
-            value?.filter(
-              v =>
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                v !== item.id,
-            ),
+        setValue((value: SelectionSingleValueType[]) =>
+          value?.filter(
+            v =>
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              v !== item.id,
+          ),
         );
       }
     },

package/src/components/FieldSelect/types.ts

@@ -119,6 +119,9 @@ type FiledSelectCommonProps = WithSupportProps<{
   /** Включить нечеткий поиск  */
   enableFuzzySearch?: boolean;
 
+  /** Поведение строки поиска при выборе опции из списка */
+  resetSearchOnOptionSelection?: boolean;
+
   onOpenChange?(open: boolean): void;
 
   selectedOptionFormatter?: SelectedOptionFormatter;
@@ -131,7 +134,7 @@ type FiledSelectCommonProps = WithSupportProps<{
 export type FieldSelectSingleProps = FieldSelectPrivateProps &
   Omit<SelectionSingleState, 'mode'> &
   WrapperProps &
-  FiledSelectCommonProps;
+  Omit<FiledSelectCommonProps, 'resetSearchOnOptionSelection'>;
 
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
   removeByBackspace?: boolean;

package/src/helperComponents/TextArea/TextArea.tsx

@@ -7,12 +7,11 @@ import {
   KeyboardEventHandler,
   MouseEventHandler,
   RefAttributes,
-  useLayoutEffect,
   useState,
 } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
 
 import styles from './styles.module.scss';