@cloud-ru/ds-fields 2.1.2 → 2.1.3

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.1.3 (2026-09-02)
+
+### Bug Fixes
+
+- **FF-8959:** sync FieldSelect search to the selected value when search is controlled ([2f29e15](https://github.com/cloud-ru-tech/snack-v2/commit/2f29e15eeb3e1dd54bb119fd27ab68d5d84e383e))
+
 ## 2.1.2 (2026-09-02)
 
 ### Bug Fixes

package/dist/cjs/components/FieldSelect/FieldSelect.js

@@ -13,8 +13,7 @@ const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
-// Минимальная ширина поискового input'а в режиме чипов: при пустом вводе input «схлопывается»
-// к этому значению и прижимается к последнему чипу (паритет с легаси BASE_MIN_WIDTH).
+// Минимальная ширина поискового input'а в режиме чипов (паритет с легаси BASE_MIN_WIDTH).
 const SEARCH_INPUT_PLUG_MIN_WIDTH = 4;
 const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
 const constants_1 = require("../../constants");
@@ -31,14 +30,10 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
     const closeDroplistOnItemClick = props.closeDroplistOnItemClick ?? !multiple;
     const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
     const inputRef = (0, react_1.useRef)(null);
-    // Реальный <input>: `inputRef` уходит в Droplist как `triggerElemRef`, а `PopoverPrivate`
-    // перезаписывает его `.current` своей span-обёрткой (см. MR!101). Отдельный ref на сам input
-    // нужен для `useButtonNavigation` (курсор/фокус) и возврата фокуса после очистки.
+    // Отдельный ref на реальный <input>: `inputRef.current` перезаписывается span-обёрткой PopoverPrivate.
     const inputElementRef = (0, react_1.useRef)(null);
     const clearButtonRef = (0, react_1.useRef)(null);
     const copyButtonRef = (0, react_1.useRef)(null);
-    // Контейнер чипов+input (замер доступной ширины) и скрытый плаг (замер ширины введённого текста)
-    // для расчёта minWidth поискового input'а в режиме чипов — см. searchInput ниже.
     const contentRef = (0, react_1.useRef)(null);
     const inputPlugRef = (0, react_1.useRef)(null);
     const [chipInputMinWidth, setChipInputMinWidth] = (0, react_1.useState)(undefined);
@@ -48,13 +43,9 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
     const open = openProp ?? openLocal;
     const [singleLocal, setSingleLocal] = (0, react_1.useState)(!multiple ? props.defaultValue : undefined);
     const [multipleLocal, setMultipleLocal] = (0, react_1.useState)(
-    // Array.isArray-страховка: при multiple defaultValue обязан быть массивом по типам,
-    // но «расхлябанный» вызов (например, Storybook-spread, где single-default остаётся
-    // строкой при переключении selection) не должен ронять компонент на `.map` строки.
+    // Страховка от вызова без типов (Storybook-spread): при multiple defaultValue может прийти строкой.
     multiple && Array.isArray(props.defaultValue) ? props.defaultValue : []);
-    // Controlled-режим «залипает»: как только потребитель прислал `value`, локальный стейт больше
-    // не читается. Иначе очистка (потребитель ставит `undefined`) откатывалась бы на устаревший
-    // локальный выбор и воскрешала прошлое значение.
+    // Controlled-режим «залипает»: иначе очистка через `value: undefined` откатится на локальный стейт.
     const singleControlled = (0, react_1.useRef)(false);
     const multipleControlled = (0, react_1.useRef)(false);
     if (!multiple && props.value !== undefined) {
@@ -125,24 +116,28 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         }
         return selectedPairs.map(formatPair).join(', ');
     }, [multiple, singleValue, selectedPairs, chips, props, formatPair, resolveItem]);
-    // Строка поиска: controlled через `search.value`, иначе локальный state. Auto-sync к выбранному
-    // значению делаем через СТАБИЛЬНЫЙ setLocalInput, а не через setInputValue в deps эффекта —
-    // иначе нестабильная ссылка сеттера зацикливает эффект (сбрасывала бы значение постоянно).
     const [localInput, setLocalInput] = (0, react_1.useState)(search?.defaultValue ?? selectedLabel);
     const inputValue = search?.value !== undefined ? search.value : localInput;
     const [typing, setTyping] = (0, react_1.useState)(false);
+    // `search` — объектный литерал с новой идентичностью каждый рендер; ref делает `setInputValue` стабильным.
+    const searchRef = (0, react_1.useRef)(search);
+    searchRef.current = search;
     const setInputValue = (0, react_1.useCallback)((next) => {
-        if (search?.value === undefined) {
+        const currentSearch = searchRef.current;
+        if (currentSearch?.value === undefined) {
             setLocalInput(next);
         }
-        search?.onChange?.(next);
-    }, [search]);
+        currentSearch?.onChange?.(next);
+    }, []);
+    const syncedLabelRef = (0, react_1.useRef)(selectedLabel);
     (0, react_1.useEffect)(() => {
-        if (!typing && resetSearchOnOptionSelection && search?.value === undefined) {
-            setLocalInput(selectedLabel);
+        if (typing || !resetSearchOnOptionSelection || syncedLabelRef.current === selectedLabel) {
+            return;
         }
-    }, [selectedLabel, typing, resetSearchOnOptionSelection, search]);
-    // autocomplete — клиентскую фильтрацию не делаем, список берётся из items как есть (серверный поиск).
+        syncedLabelRef.current = selectedLabel;
+        setInputValue(selectedLabel);
+    }, [selectedLabel, typing, resetSearchOnOptionSelection, setInputValue]);
+    // При autocomplete фильтрует сервер — items берутся как есть.
     const filteredItems = (0, react_1.useMemo)(() => {
         if (!searchable || autocomplete || !typing) {
             return items;
@@ -162,8 +157,7 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         return (0, utils_2.filterItems)(pinBottom, inputValue, enableFuzzySearch);
     }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
     const handleOpenChange = (0, react_1.useCallback)((next) => {
-        // Дроплист открывается кликом по полю (Droplist дёргает onOpenChange(true)).
-        // readonly/disabled поле открывать нельзя — блокируем открытие, закрытие разрешаем.
+        // readonly/disabled поле открывать нельзя, закрывать — можно.
         if (next && (disabled || readOnly))
             return;
         if (openProp === undefined) {
@@ -261,9 +255,7 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         }
         return copied;
     }, [onCopyButtonClick, valueToCopy]);
-    // Clear/Copy как roving-postfix: ArrowRight из input (курсор в конце или readonly) уводит на
-    // кнопку, ArrowLeft — обратно в поле. Паритет с FieldCombo. `inputElementRef` — реальный input,
-    // т.к. `inputRef` клобберится popover'ом.
+    // Clear/Copy — roving-postfix (ArrowRight/ArrowLeft), паритет с FieldCombo.
     const clearButtonSettings = (0, input_private_1.useClearButton)({
         clearButtonRef,
         showClearButton: showClear,
@@ -288,9 +280,8 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
     const handleTriggerKeyDown = (event) => {
-        // Пробрасываем consumer onKeyDown до внутренней обработки (паритет с легаси useHandleOnKeyDown).
+        // Consumer-обработчик идёт до внутренней обработки (паритет с легаси useHandleOnKeyDown).
         onKeyDownProp?.(event);
-        // Roving-навигация по clear/copy (ArrowRight/ArrowLeft). ArrowDown/Enter ниже не перехватываются.
         onInputKeyDown(event);
         if (disabled || readOnly) {
             return;
@@ -304,7 +295,7 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
             handleOpenChange(false);
         }
         if (addOptionByEnter && event.key === 'Enter' && inputValue !== '') {
-            // Зафиксировать введённый текст как новый выбор (создание опции «на лету»).
+            // Введённый текст становится новым значением (создание опции «на лету»).
             event.preventDefault();
             if (multiple) {
                 if (!multipleValue.includes(inputValue)) {
@@ -358,10 +349,8 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         ? { mode: 'multiple', value: multipleValue, onChange: handleMultipleChange }
         : { mode: 'single', value: singleValue, onChange: handleSingleChange };
     const hasChips = chips && selectedPairs.length > 0;
-    // minWidth поискового input'а в режиме чипов: ширина введённого текста (скрытый `.inputPlug`),
-    // но не больше ширины строки чипов (`contentRef`). Замер в layout-эффекте (до paint, без мигания):
-    // пустой ввод → ~4px (input прижат к последнему чипу), длинный ввод → перенос на новую строку
-    // через flex-wrap. Без чипов minWidth не задаётся (input занимает всю строку как single-select).
+    // minWidth поискового input'а = ширина введённого текста (`.inputPlug`), но не больше строки чипов.
+    // Замер до paint, иначе input мигает при вводе.
     (0, utils_1.useLayoutEffect)(() => {
         if (!hasChips) {
             setChipInputMinWidth(undefined);
@@ -372,11 +361,9 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         setChipInputMinWidth(Math.min(content, Math.max(plug, SEARCH_INPUT_PLUG_MIN_WIDTH)));
     }, [hasChips, inputValue, selectedPairs.length]);
     const searchInputField = ((0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, inputRef, inputElementRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, !searchable && styles_module_scss_2.default.readonlyCursor), value: inputValue, onChange: searchable ? handleInputChange : undefined, placeholder: selectedLabel || hasChips ? '' : placeholder, disabled: disabled, readonly: !searchable || readOnly, id: id, name: name, autoFocus: resolvedAutoFocus, tabIndex: inputTabIndex, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleTriggerKeyDown, "data-test-id": constants_1.TEST_IDS.fieldSelectInput }));
-    // В режиме чипов input заворачивается в `.inputWrapper` с динамической minWidth (флоу за чипами);
-    // без чипов — обычный `inputArea` на всю строку.
     const searchInput = hasChips ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: searchInputField }));
     const trigger = (
-    // Семантика: combobox-обёртка с InputPrivate внутри (input = focusable element).
+    // Focusable-элемент — InputPrivate внутри, обёртка только собирает combobox.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, styles_module_scss_2.default.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onClick: handleTriggerClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, shared_1.getAcrylicProps)({
                             validationState: effectiveValidationState,

package/dist/esm/components/FieldSelect/FieldSelect.js

@@ -7,8 +7,7 @@ import { useLayoutEffect } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-// Минимальная ширина поискового input'а в режиме чипов: при пустом вводе input «схлопывается»
-// к этому значению и прижимается к последнему чипу (паритет с легаси BASE_MIN_WIDTH).
+// Минимальная ширина поискового input'а в режиме чипов (паритет с легаси BASE_MIN_WIDTH).
 const SEARCH_INPUT_PLUG_MIN_WIDTH = 4;
 import { FieldDecorator, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
 import { TEST_IDS } from '../../constants.js';
@@ -25,14 +24,10 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     const closeDroplistOnItemClick = props.closeDroplistOnItemClick ?? !multiple;
     const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
     const inputRef = useRef(null);
-    // Реальный <input>: `inputRef` уходит в Droplist как `triggerElemRef`, а `PopoverPrivate`
-    // перезаписывает его `.current` своей span-обёрткой (см. MR!101). Отдельный ref на сам input
-    // нужен для `useButtonNavigation` (курсор/фокус) и возврата фокуса после очистки.
+    // Отдельный ref на реальный <input>: `inputRef.current` перезаписывается span-обёрткой PopoverPrivate.
     const inputElementRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
-    // Контейнер чипов+input (замер доступной ширины) и скрытый плаг (замер ширины введённого текста)
-    // для расчёта minWidth поискового input'а в режиме чипов — см. searchInput ниже.
     const contentRef = useRef(null);
     const inputPlugRef = useRef(null);
     const [chipInputMinWidth, setChipInputMinWidth] = useState(undefined);
@@ -42,13 +37,9 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     const open = openProp ?? openLocal;
     const [singleLocal, setSingleLocal] = useState(!multiple ? props.defaultValue : undefined);
     const [multipleLocal, setMultipleLocal] = useState(
-    // Array.isArray-страховка: при multiple defaultValue обязан быть массивом по типам,
-    // но «расхлябанный» вызов (например, Storybook-spread, где single-default остаётся
-    // строкой при переключении selection) не должен ронять компонент на `.map` строки.
+    // Страховка от вызова без типов (Storybook-spread): при multiple defaultValue может прийти строкой.
     multiple && Array.isArray(props.defaultValue) ? props.defaultValue : []);
-    // Controlled-режим «залипает»: как только потребитель прислал `value`, локальный стейт больше
-    // не читается. Иначе очистка (потребитель ставит `undefined`) откатывалась бы на устаревший
-    // локальный выбор и воскрешала прошлое значение.
+    // Controlled-режим «залипает»: иначе очистка через `value: undefined` откатится на локальный стейт.
     const singleControlled = useRef(false);
     const multipleControlled = useRef(false);
     if (!multiple && props.value !== undefined) {
@@ -119,24 +110,28 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         return selectedPairs.map(formatPair).join(', ');
     }, [multiple, singleValue, selectedPairs, chips, props, formatPair, resolveItem]);
-    // Строка поиска: controlled через `search.value`, иначе локальный state. Auto-sync к выбранному
-    // значению делаем через СТАБИЛЬНЫЙ setLocalInput, а не через setInputValue в deps эффекта —
-    // иначе нестабильная ссылка сеттера зацикливает эффект (сбрасывала бы значение постоянно).
     const [localInput, setLocalInput] = useState(search?.defaultValue ?? selectedLabel);
     const inputValue = search?.value !== undefined ? search.value : localInput;
     const [typing, setTyping] = useState(false);
+    // `search` — объектный литерал с новой идентичностью каждый рендер; ref делает `setInputValue` стабильным.
+    const searchRef = useRef(search);
+    searchRef.current = search;
     const setInputValue = useCallback((next) => {
-        if (search?.value === undefined) {
+        const currentSearch = searchRef.current;
+        if (currentSearch?.value === undefined) {
             setLocalInput(next);
         }
-        search?.onChange?.(next);
-    }, [search]);
+        currentSearch?.onChange?.(next);
+    }, []);
+    const syncedLabelRef = useRef(selectedLabel);
     useEffect(() => {
-        if (!typing && resetSearchOnOptionSelection && search?.value === undefined) {
-            setLocalInput(selectedLabel);
+        if (typing || !resetSearchOnOptionSelection || syncedLabelRef.current === selectedLabel) {
+            return;
         }
-    }, [selectedLabel, typing, resetSearchOnOptionSelection, search]);
-    // autocomplete — клиентскую фильтрацию не делаем, список берётся из items как есть (серверный поиск).
+        syncedLabelRef.current = selectedLabel;
+        setInputValue(selectedLabel);
+    }, [selectedLabel, typing, resetSearchOnOptionSelection, setInputValue]);
+    // При autocomplete фильтрует сервер — items берутся как есть.
     const filteredItems = useMemo(() => {
         if (!searchable || autocomplete || !typing) {
             return items;
@@ -156,8 +151,7 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         return filterItems(pinBottom, inputValue, enableFuzzySearch);
     }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
     const handleOpenChange = useCallback((next) => {
-        // Дроплист открывается кликом по полю (Droplist дёргает onOpenChange(true)).
-        // readonly/disabled поле открывать нельзя — блокируем открытие, закрытие разрешаем.
+        // readonly/disabled поле открывать нельзя, закрывать — можно.
         if (next && (disabled || readOnly))
             return;
         if (openProp === undefined) {
@@ -255,9 +249,7 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         return copied;
     }, [onCopyButtonClick, valueToCopy]);
-    // Clear/Copy как roving-postfix: ArrowRight из input (курсор в конце или readonly) уводит на
-    // кнопку, ArrowLeft — обратно в поле. Паритет с FieldCombo. `inputElementRef` — реальный input,
-    // т.к. `inputRef` клобберится popover'ом.
+    // Clear/Copy — roving-postfix (ArrowRight/ArrowLeft), паритет с FieldCombo.
     const clearButtonSettings = useClearButton({
         clearButtonRef,
         showClearButton: showClear,
@@ -282,9 +274,8 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
     const handleTriggerKeyDown = (event) => {
-        // Пробрасываем consumer onKeyDown до внутренней обработки (паритет с легаси useHandleOnKeyDown).
+        // Consumer-обработчик идёт до внутренней обработки (паритет с легаси useHandleOnKeyDown).
         onKeyDownProp?.(event);
-        // Roving-навигация по clear/copy (ArrowRight/ArrowLeft). ArrowDown/Enter ниже не перехватываются.
         onInputKeyDown(event);
         if (disabled || readOnly) {
             return;
@@ -298,7 +289,7 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
             handleOpenChange(false);
         }
         if (addOptionByEnter && event.key === 'Enter' && inputValue !== '') {
-            // Зафиксировать введённый текст как новый выбор (создание опции «на лету»).
+            // Введённый текст становится новым значением (создание опции «на лету»).
             event.preventDefault();
             if (multiple) {
                 if (!multipleValue.includes(inputValue)) {
@@ -352,10 +343,8 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         ? { mode: 'multiple', value: multipleValue, onChange: handleMultipleChange }
         : { mode: 'single', value: singleValue, onChange: handleSingleChange };
     const hasChips = chips && selectedPairs.length > 0;
-    // minWidth поискового input'а в режиме чипов: ширина введённого текста (скрытый `.inputPlug`),
-    // но не больше ширины строки чипов (`contentRef`). Замер в layout-эффекте (до paint, без мигания):
-    // пустой ввод → ~4px (input прижат к последнему чипу), длинный ввод → перенос на новую строку
-    // через flex-wrap. Без чипов minWidth не задаётся (input занимает всю строку как single-select).
+    // minWidth поискового input'а = ширина введённого текста (`.inputPlug`), но не больше строки чипов.
+    // Замер до paint, иначе input мигает при вводе.
     useLayoutEffect(() => {
         if (!hasChips) {
             setChipInputMinWidth(undefined);
@@ -366,11 +355,9 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         setChipInputMinWidth(Math.min(content, Math.max(plug, SEARCH_INPUT_PLUG_MIN_WIDTH)));
     }, [hasChips, inputValue, selectedPairs.length]);
     const searchInputField = (_jsx(InputPrivate, { ref: mergeRefs(ref, inputRef, inputElementRef), className: cn(fieldStyles.fieldInput, !searchable && styles.readonlyCursor), value: inputValue, onChange: searchable ? handleInputChange : undefined, placeholder: selectedLabel || hasChips ? '' : placeholder, disabled: disabled, readonly: !searchable || readOnly, id: id, name: name, autoFocus: resolvedAutoFocus, tabIndex: inputTabIndex, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleTriggerKeyDown, "data-test-id": TEST_IDS.fieldSelectInput }));
-    // В режиме чипов input заворачивается в `.inputWrapper` с динамической minWidth (флоу за чипами);
-    // без чипов — обычный `inputArea` на всю строку.
     const searchInput = hasChips ? (_jsx("div", { className: styles.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField })) : (_jsx("div", { className: fieldStyles.inputArea, children: searchInputField }));
     const trigger = (
-    // Семантика: combobox-обёртка с InputPrivate внутри (input = focusable element).
+    // Focusable-элемент — InputPrivate внутри, обёртка только собирает combobox.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsxs("div", { className: cn(fieldStyles.fieldWrapper, styles.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onClick: handleTriggerClick, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
                             validationState: effectiveValidationState,