@trackunit/react-form-components 2.10.8-alpha-0ef4e15e7c1.0 → 2.10.8

package/index.cjs.js

@@ -2432,6 +2432,10 @@ formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) =>
     getOptionPrefixRef.current = getOptionPrefix;
     const onMenuScrollToBottomRef = react.useRef(onMenuScrollToBottom);
     onMenuScrollToBottomRef.current = onMenuScrollToBottom;
+    // Toggling hasError must not recreate customComponents. react-select remounts its input when
+    // that object changes, which drops focus and the in-progress value.
+    const hasErrorRef = react.useRef(hasError);
+    hasErrorRef.current = hasError;
     // Keep react-select's control ref intact while retaining the live DOM node for viewport-relative
     // vertical measurements that can change without changing an absolute portal's document offset.
     const controlRef = react.useRef(null);
@@ -2450,7 +2454,7 @@ formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) =>
         return {
             SelectContainer: selectContainer => {
                 return (jsxRuntime.jsx(ReactSelect.components.SelectContainer, { ...selectContainer, className: cvaSelectContainer({
-                        invalid: hasError,
+                        invalid: hasErrorRef.current,
                         fieldSize,
                         disabled: Boolean(disabled),
                         className: [className, selectContainer.className],
@@ -2613,7 +2617,6 @@ formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) =>
             },
         };
     }, [
-        hasError,
         fieldSize,
         disabled,
         className,
@@ -2667,9 +2670,22 @@ const getMenuGeometryStyle = (geometry, controlRect, placement) => {
     return style;
 };
 const getInputComponent = (children) => {
-    return Array.isArray(children)
-        ? children.find(child => child !== null && child !== undefined && /react-select-\d+-input/.test(child?.props?.id))
-        : null;
+    if (!Array.isArray(children)) {
+        return null;
+    }
+    return children.find(child => isSelectInputElement(child)) ?? null;
+};
+const isSelectInputElement = (child) => {
+    if (child === null || typeof child !== "object" || !("props" in child)) {
+        return false;
+    }
+    const props = child.props;
+    if (props === null || typeof props !== "object") {
+        return false;
+    }
+    const id = "id" in props ? props.id : undefined;
+    const role = "role" in props ? props.role : undefined;
+    return (typeof id === "string" && /react-select-\d+-input/.test(id)) || role === "combobox";
 };
 const getMultiValueComponents = (children) => {
     if (!Array.isArray(children)) {

package/index.esm.js

@@ -2431,6 +2431,10 @@ formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) =>
     getOptionPrefixRef.current = getOptionPrefix;
     const onMenuScrollToBottomRef = useRef(onMenuScrollToBottom);
     onMenuScrollToBottomRef.current = onMenuScrollToBottom;
+    // Toggling hasError must not recreate customComponents. react-select remounts its input when
+    // that object changes, which drops focus and the in-progress value.
+    const hasErrorRef = useRef(hasError);
+    hasErrorRef.current = hasError;
     // Keep react-select's control ref intact while retaining the live DOM node for viewport-relative
     // vertical measurements that can change without changing an absolute portal's document offset.
     const controlRef = useRef(null);
@@ -2449,7 +2453,7 @@ formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) =>
         return {
             SelectContainer: selectContainer => {
                 return (jsx(components.SelectContainer, { ...selectContainer, className: cvaSelectContainer({
-                        invalid: hasError,
+                        invalid: hasErrorRef.current,
                         fieldSize,
                         disabled: Boolean(disabled),
                         className: [className, selectContainer.className],
@@ -2612,7 +2616,6 @@ formatOptionLabel, onMenuScrollToBottom, getMenuGeometry, setMenuListRef, }) =>
             },
         };
     }, [
-        hasError,
         fieldSize,
         disabled,
         className,
@@ -2666,9 +2669,22 @@ const getMenuGeometryStyle = (geometry, controlRect, placement) => {
     return style;
 };
 const getInputComponent = (children) => {
-    return Array.isArray(children)
-        ? children.find(child => child !== null && child !== undefined && /react-select-\d+-input/.test(child?.props?.id))
-        : null;
+    if (!Array.isArray(children)) {
+        return null;
+    }
+    return children.find(child => isSelectInputElement(child)) ?? null;
+};
+const isSelectInputElement = (child) => {
+    if (child === null || typeof child !== "object" || !("props" in child)) {
+        return false;
+    }
+    const props = child.props;
+    if (props === null || typeof props !== "object") {
+        return false;
+    }
+    const id = "id" in props ? props.id : undefined;
+    const role = "role" in props ? props.role : undefined;
+    return (typeof id === "string" && /react-select-\d+-input/.test(id)) || role === "combobox";
 };
 const getMultiValueComponents = (children) => {
     if (!Array.isArray(children)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.10.8-alpha-0ef4e15e7c1.0",
+  "version": "2.10.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.1",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.17.5-alpha-0ef4e15e7c1.0",
+    "@trackunit/date-and-time-utils": "1.17.4",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.11",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "2.3.5-alpha-0ef4e15e7c1.0",
-    "@trackunit/react-components": "3.8.2-alpha-0ef4e15e7c1.0",
-    "@trackunit/ui-icons": "1.17.5-alpha-0ef4e15e7c1.0",
-    "@trackunit/shared-utils": "1.19.5-alpha-0ef4e15e7c1.0",
-    "@trackunit/ui-design-tokens": "1.18.5-alpha-0ef4e15e7c1.0",
-    "@trackunit/i18n-library-translation": "2.8.5-alpha-0ef4e15e7c1.0",
+    "@trackunit/css-class-variance-utilities": "2.3.4",
+    "@trackunit/react-components": "3.8.1",
+    "@trackunit/ui-icons": "1.17.4",
+    "@trackunit/shared-utils": "1.19.4",
+    "@trackunit/ui-design-tokens": "1.18.4",
+    "@trackunit/i18n-library-translation": "2.8.4",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.52.0"
   },