@trackunit/react-form-components 1.7.23 → 1.7.26

package/index.cjs.js

@@ -2100,7 +2100,7 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
  * @param {TagsContainerProps} props - The props for the TagContainer
  * @returns {ReactElement} TagsContainer
  */
-const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled }) => {
+const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
     const containerRef = react.useRef(null);
     const [isReady, setIsReady] = react.useState(false);
     const [counterWidth, setCounterWidth] = react.useState(0);
@@ -2167,9 +2167,9 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
         }, { elements: [], counter: 0 });
         return elements;
     }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
-    return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
+    return (jsxRuntime.jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
             width: `${width}`,
-        }, children: [renderedElements, postFix] }));
+        }, children: [preFix, renderedElements, postFix] }));
 };
 
 /**
@@ -2202,6 +2202,9 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const searchInput = props && props.children && props.children[1];
+                    const placeholderElement = Array.isArray(props.children)
+                        ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
+                        : null;
                     return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
                                     const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
@@ -2217,7 +2220,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                         Icon: optionPrefix,
                                     };
                                 })
-                                : [], postFix: searchInput, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
+                                : [], postFix: searchInput, preFix: placeholderElement ? jsxRuntime.jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
                                         return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
@@ -2225,7 +2228,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
-                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
+                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
                 }
                 return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
             },
@@ -2548,6 +2551,19 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
 const Select = (props) => {
     const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
+    // Control the search input value so it doesn’t reset after selection
+    const [inputValue, setInputValue] = react.useState("");
+    const handleInputChange = react.useCallback((nextValue, meta) => {
+        // Ignore internal actions that clear the input to preserve the typed text
+        // and avoid resetting the parent’s search state
+        const ignoreActions = new Set(["set-value", "input-blur", "menu-close"]);
+        if (ignoreActions.has(meta.action)) {
+            return inputValue;
+        }
+        setInputValue(nextValue);
+        onInputChange?.(nextValue, meta);
+        return nextValue;
+    }, [inputValue, onInputChange]);
     const reactSelectProps = react.useMemo(() => ({
         value,
         menuPlacement,
@@ -2576,7 +2592,8 @@ const Select = (props) => {
         isClearable,
         id,
         onMenuScrollToBottom,
-        onInputChange,
+        onInputChange: handleInputChange,
+        inputValue,
         hideSelectedOptions,
         isDisabled: Boolean(disabled),
     }), [
@@ -2585,8 +2602,10 @@ const Select = (props) => {
         customStyles,
         dataTestId,
         disabled,
+        handleInputChange,
         hideSelectedOptions,
         id,
+        inputValue,
         isClearable,
         isLoading,
         isMulti,
@@ -2596,7 +2615,6 @@ const Select = (props) => {
         menuIsOpen,
         menuPlacement,
         onChange,
-        onInputChange,
         onMenuScrollToBottom,
         openMenuOnClick,
         openMenuOnFocus,

package/index.esm.js

@@ -2099,7 +2099,7 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
  * @param {TagsContainerProps} props - The props for the TagContainer
  * @returns {ReactElement} TagsContainer
  */
-const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled }) => {
+const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, disabled, }) => {
     const containerRef = useRef(null);
     const [isReady, setIsReady] = useState(false);
     const [counterWidth, setCounterWidth] = useState(0);
@@ -2166,9 +2166,9 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, disabled
         }, { elements: [], counter: 0 });
         return elements;
     }, [items, availableSpaceWidth, counterWidth, disabled, onWidthKnownHandler, childrenWidths]);
-    return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady }), ref: containerRef, style: {
+    return (jsxs("div", { className: cvaSelectDynamicTagContainer({ visible: isReady || !!preFix }), ref: containerRef, style: {
             width: `${width}`,
-        }, children: [renderedElements, postFix] }));
+        }, children: [preFix, renderedElements, postFix] }));
 };
 
 /**
@@ -2201,6 +2201,9 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const searchInput = props && props.children && props.children[1];
+                    const placeholderElement = Array.isArray(props.children)
+                        ? props.children.find(child => child && child.key === PLACEHOLDER_KEY)
+                        : null;
                     return (jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
                                     const optionPrefix = tagProps.data && getOptionPrefix ? getOptionPrefix(tagProps.data) : null;
@@ -2216,7 +2219,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                         Icon: optionPrefix,
                                     };
                                 })
-                                : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags
+                                : [], postFix: searchInput, preFix: placeholderElement ? jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxs(Fragment, { children: [tags
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
                                         return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
@@ -2224,7 +2227,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
-                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
+                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
                 }
                 return (jsx(Fragment, { children: jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
             },
@@ -2547,6 +2550,19 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
 const Select = (props) => {
     const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
+    // Control the search input value so it doesn’t reset after selection
+    const [inputValue, setInputValue] = useState("");
+    const handleInputChange = useCallback((nextValue, meta) => {
+        // Ignore internal actions that clear the input to preserve the typed text
+        // and avoid resetting the parent’s search state
+        const ignoreActions = new Set(["set-value", "input-blur", "menu-close"]);
+        if (ignoreActions.has(meta.action)) {
+            return inputValue;
+        }
+        setInputValue(nextValue);
+        onInputChange?.(nextValue, meta);
+        return nextValue;
+    }, [inputValue, onInputChange]);
     const reactSelectProps = useMemo(() => ({
         value,
         menuPlacement,
@@ -2575,7 +2591,8 @@ const Select = (props) => {
         isClearable,
         id,
         onMenuScrollToBottom,
-        onInputChange,
+        onInputChange: handleInputChange,
+        inputValue,
         hideSelectedOptions,
         isDisabled: Boolean(disabled),
     }), [
@@ -2584,8 +2601,10 @@ const Select = (props) => {
         customStyles,
         dataTestId,
         disabled,
+        handleInputChange,
         hideSelectedOptions,
         id,
+        inputValue,
         isClearable,
         isLoading,
         isMulti,
@@ -2595,7 +2614,6 @@ const Select = (props) => {
         menuIsOpen,
         menuPlacement,
         onChange,
-        onInputChange,
         onMenuScrollToBottom,
         openMenuOnClick,
         openMenuOnFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.7.23",
+  "version": "1.7.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,14 +16,14 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.6.38",
-    "@trackunit/react-components": "1.8.10",
-    "@trackunit/ui-icons": "1.6.37",
-    "@trackunit/shared-utils": "1.8.38",
-    "@trackunit/ui-design-tokens": "1.6.40",
-    "@trackunit/i18n-library-translation": "1.6.42",
+    "@trackunit/css-class-variance-utilities": "1.6.39",
+    "@trackunit/react-components": "1.8.11",
+    "@trackunit/ui-icons": "1.6.38",
+    "@trackunit/shared-utils": "1.8.39",
+    "@trackunit/ui-design-tokens": "1.6.41",
+    "@trackunit/i18n-library-translation": "1.6.43",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.3.38",
+    "@trackunit/react-test-setup": "1.3.39",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "module": "./index.esm.js",

package/src/components/Select/TagsContainer.d.ts

@@ -34,6 +34,7 @@ interface TagsContainerProps {
      * @memberof TagsContainerProps
      */
     itemsGap?: number;
+    preFix: ReactElement | null;
     postFix: ReactElement;
     /**
      * Is the parent dropdown disabled
@@ -46,5 +47,5 @@ interface TagsContainerProps {
  * @param {TagsContainerProps} props - The props for the TagContainer
  * @returns {ReactElement} TagsContainer
  */
-export declare const TagsContainer: ({ items, width, itemsGap, postFix, disabled }: TagsContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TagsContainer: ({ items, width, itemsGap, postFix, preFix, disabled, }: TagsContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};