@trackunit/react-form-components 1.8.145 → 1.8.151

package/index.cjs.js

@@ -2378,6 +2378,7 @@ EmailField.displayName = "EmailField";
 function isWritableRef(r) {
     return typeof r === "object" && r !== null && "current" in r;
 }
+const IGNORED_RS_ACTIONS = new Set(["set-value", "input-blur", "menu-close"]);
 /**
  * Multi adapter:
  * - keeps TOption[] semantics (via `MultiValue<TOption>`)
@@ -2390,9 +2391,11 @@ function isWritableRef(r) {
  * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
+    const [inputValue, setInputValue] = react.useState("");
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = react.useRef(null);
+    const onInputChangeRef = react.useRef(undefined);
     // Bridge external ref (supports both callback and object refs)
     react.useEffect(() => {
         if (typeof ref === "function") {
@@ -2414,6 +2417,20 @@ const FormFieldSelectAdapterMulti = (props) => {
         : undefined, [selectPropsWithAccessors]);
     // Compute selected options snapshot for hidden inputs (prefer controlled `value`)
     const selectedOptions = react.useMemo(() => value ?? defaultValue ?? [], [value, defaultValue]);
+    react.useEffect(() => {
+        onInputChangeRef.current = onInputChange;
+    }, [onInputChange]);
+    const handleInputChange = react.useCallback((nextValue, meta) => {
+        if (IGNORED_RS_ACTIONS.has(meta.action)) {
+            return inputValue; // keep current visible value
+        }
+        if (nextValue !== inputValue) {
+            setInputValue(nextValue);
+        }
+        // Call the latest external callback from ref
+        onInputChangeRef.current?.(nextValue, meta);
+        return nextValue;
+    }, [inputValue]);
     // Build the exact prop bag for BaseSelect (multi=true).
     const childProps = react.useMemo(() => ({
         ...selectProps,
@@ -2425,7 +2442,9 @@ const FormFieldSelectAdapterMulti = (props) => {
         value: value ?? null,
         defaultValue,
         onChange,
-    }), [selectProps, dataTestId, controlId, onBlur, options, value, defaultValue, onChange]);
+        onInputChange: handleInputChange,
+        inputValue,
+    }), [selectProps, dataTestId, controlId, onBlur, options, value, defaultValue, onChange, handleInputChange, inputValue]);
     return (jsxRuntime.jsxs(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
             ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
                 ("readOnly" in selectProps && Boolean(selectProps.readOnly)))

package/index.esm.js

@@ -2377,6 +2377,7 @@ EmailField.displayName = "EmailField";
 function isWritableRef(r) {
     return typeof r === "object" && r !== null && "current" in r;
 }
+const IGNORED_RS_ACTIONS = new Set(["set-value", "input-blur", "menu-close"]);
 /**
  * Multi adapter:
  * - keeps TOption[] semantics (via `MultiValue<TOption>`)
@@ -2389,9 +2390,11 @@ function isWritableRef(r) {
  * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
+    const [inputValue, setInputValue] = useState("");
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = useRef(null);
+    const onInputChangeRef = useRef(undefined);
     // Bridge external ref (supports both callback and object refs)
     useEffect(() => {
         if (typeof ref === "function") {
@@ -2413,6 +2416,20 @@ const FormFieldSelectAdapterMulti = (props) => {
         : undefined, [selectPropsWithAccessors]);
     // Compute selected options snapshot for hidden inputs (prefer controlled `value`)
     const selectedOptions = useMemo(() => value ?? defaultValue ?? [], [value, defaultValue]);
+    useEffect(() => {
+        onInputChangeRef.current = onInputChange;
+    }, [onInputChange]);
+    const handleInputChange = useCallback((nextValue, meta) => {
+        if (IGNORED_RS_ACTIONS.has(meta.action)) {
+            return inputValue; // keep current visible value
+        }
+        if (nextValue !== inputValue) {
+            setInputValue(nextValue);
+        }
+        // Call the latest external callback from ref
+        onInputChangeRef.current?.(nextValue, meta);
+        return nextValue;
+    }, [inputValue]);
     // Build the exact prop bag for BaseSelect (multi=true).
     const childProps = useMemo(() => ({
         ...selectProps,
@@ -2424,7 +2441,9 @@ const FormFieldSelectAdapterMulti = (props) => {
         value: value ?? null,
         defaultValue,
         onChange,
-    }), [selectProps, dataTestId, controlId, onBlur, options, value, defaultValue, onChange]);
+        onInputChange: handleInputChange,
+        inputValue,
+    }), [selectProps, dataTestId, controlId, onBlur, options, value, defaultValue, onChange, handleInputChange, inputValue]);
     return (jsxs(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
             ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
                 ("readOnly" in selectProps && Boolean(selectProps.readOnly)))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.145",
+  "version": "1.8.151",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.97",
-    "@trackunit/react-components": "1.10.73",
-    "@trackunit/ui-icons": "1.7.98",
-    "@trackunit/shared-utils": "1.9.97",
-    "@trackunit/ui-design-tokens": "1.7.97",
-    "@trackunit/i18n-library-translation": "1.7.115",
+    "@trackunit/css-class-variance-utilities": "1.7.103",
+    "@trackunit/react-components": "1.10.79",
+    "@trackunit/ui-icons": "1.7.104",
+    "@trackunit/shared-utils": "1.9.103",
+    "@trackunit/ui-design-tokens": "1.7.103",
+    "@trackunit/i18n-library-translation": "1.7.121",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "es-toolkit": "^1.39.10",

package/src/components/MultiSelectField/FormFieldSelectAdapterMulti.d.ts

@@ -1,7 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { FocusEvent, ReactElement, ReactNode, Ref } from "react";
-import { GroupBase, MultiValue } from "react-select";
+import { GroupBase, InputActionMeta, MultiValue } from "react-select";
 import { SelectProps } from "../BaseSelect/useSelect";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { BaseOptionType } from "../SelectField/FormFieldSelectAdapter";
@@ -40,6 +40,8 @@ export type MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionTyp
     name?: string;
     /** Field id; also propagated to BaseSelect via child props */
     id?: string;
+    /** Optional passthrough onInputChange (will be called in addition to internal logic) */
+    onInputChange?: (value: string, meta: InputActionMeta) => void;
 };
 interface FormFieldSelectAdapterMultiProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends MultiSelectFieldProps<TOption, TIsAsync, TGroup> {
     /**