@trackunit/react-form-components 1.16.11 → 1.16.14

package/index.cjs.js

@@ -3779,16 +3779,26 @@ Search.displayName = "Search";
 const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required = false, ...rest }) => {
     const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = react.useState(value ?? defaultValue);
+    const onChangeRef = react.useRef(onChange);
+    react.useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
     react.useEffect(() => {
-        setInnerValue(defaultValue);
-    }, [defaultValue]);
+        const nextValue = value ?? defaultValue;
+        setInnerValue(currentValue => {
+            if (currentValue === nextValue) {
+                return currentValue;
+            }
+            return nextValue;
+        });
+    }, [value, defaultValue]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlFor = react.useMemo(() => htmlForProp ?? id ?? "selectField-" + sharedUtils.uuidv4(), [htmlForProp, id]);
     const innerRef = react.useRef(null);
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     react.useImperativeHandle(ref, () => innerRef.current, []);
     react.useEffect(() => {
-        if (innerValue === undefined) {
+        if (isFirstRender || innerValue === undefined) {
             return;
         }
         const event = new Event("change");
@@ -3796,8 +3806,8 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
             innerRef.current.value = ""; // Set the desired option value
         }
         innerRef.current?.dispatchEvent(event);
-        onChange?.(event);
-    }, [onChange, innerValue, isFirstRender]);
+        onChangeRef.current?.(event);
+    }, [innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate

package/index.esm.js

@@ -3778,16 +3778,26 @@ Search.displayName = "Search";
 const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required = false, ...rest }) => {
     const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value ?? defaultValue);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
     useEffect(() => {
-        setInnerValue(defaultValue);
-    }, [defaultValue]);
+        const nextValue = value ?? defaultValue;
+        setInnerValue(currentValue => {
+            if (currentValue === nextValue) {
+                return currentValue;
+            }
+            return nextValue;
+        });
+    }, [value, defaultValue]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlFor = useMemo(() => htmlForProp ?? id ?? "selectField-" + uuidv4(), [htmlForProp, id]);
     const innerRef = useRef(null);
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     useImperativeHandle(ref, () => innerRef.current, []);
     useEffect(() => {
-        if (innerValue === undefined) {
+        if (isFirstRender || innerValue === undefined) {
             return;
         }
         const event = new Event("change");
@@ -3795,8 +3805,8 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
             innerRef.current.value = ""; // Set the desired option value
         }
         innerRef.current?.dispatchEvent(event);
-        onChange?.(event);
-    }, [onChange, innerValue, isFirstRender]);
+        onChangeRef.current?.(event);
+    }, [innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.16.11",
+  "version": "1.16.14",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,18 +9,18 @@
   "dependencies": {
     "react": "19.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.76",
+    "@trackunit/date-and-time-utils": "1.11.77",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.74",
-    "@trackunit/react-components": "1.18.20",
-    "@trackunit/ui-icons": "1.11.71",
-    "@trackunit/shared-utils": "1.13.74",
-    "@trackunit/ui-design-tokens": "1.11.72",
-    "@trackunit/i18n-library-translation": "1.13.10",
+    "@trackunit/css-class-variance-utilities": "1.11.75",
+    "@trackunit/react-components": "1.18.21",
+    "@trackunit/ui-icons": "1.11.72",
+    "@trackunit/shared-utils": "1.13.75",
+    "@trackunit/ui-design-tokens": "1.11.73",
+    "@trackunit/i18n-library-translation": "1.13.13",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },