@trackunit/react-form-components 0.0.444 → 0.0.448

package/index.cjs.js

@@ -1922,6 +1922,7 @@ Select.displayName = "Select";
 
 const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
     var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
+    const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = React.useState(value || defaultValue);
     React.useEffect(() => {
         setInnerValue(defaultValue);
@@ -1930,18 +1931,18 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
     const htmlFor = React.useMemo(() => (id ? id : "selectField-" + uuid.v4()), [id]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
-    const handleChange = React.useCallback((newValue) => {
-        setInnerValue(newValue === null || newValue === void 0 ? void 0 : newValue.value);
-    }, []);
     React.useEffect(() => {
         var _a;
-        if (!innerValue) {
+        if (innerValue === undefined) {
             return;
         }
         const event = new Event("change");
+        if (innerValue === "" && innerRef.current) {
+            innerRef.current.value = ""; // Set the desired option value
+        }
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange, innerValue]);
+    }, [onChange, 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
@@ -1955,13 +1956,18 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
         htmlFor,
         className,
         dataTestId,
-        helpText,
+        helpText: (renderAsInvalid && errorMessage) || helpText,
         helpAddon,
         tip,
         label,
         disabled, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: handleChange, value: selectedOption, defaultValue: selectedOption }))] }));
+                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                    // If theres no value, set the inner value to an empty string
+                    // A native select can not have a null value
+                    // So even if react-select sends a null value, we need to convert it to an empty string
+                    setInnerValue(!e ? "" : e.value);
+                }, value: selectedOption, defaultValue: selectedOption }))] }));
 });
 
 /**

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
@@ -1892,6 +1892,7 @@ Select.displayName = "Select";
 
 const FormFieldSelectAdapter = forwardRef((_a, ref) => {
     var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
+    const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value || defaultValue);
     useEffect(() => {
         setInnerValue(defaultValue);
@@ -1900,18 +1901,18 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
     const htmlFor = useMemo(() => (id ? id : "selectField-" + v4()), [id]);
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
-    const handleChange = useCallback((newValue) => {
-        setInnerValue(newValue === null || newValue === void 0 ? void 0 : newValue.value);
-    }, []);
     useEffect(() => {
         var _a;
-        if (!innerValue) {
+        if (innerValue === undefined) {
             return;
         }
         const event = new Event("change");
+        if (innerValue === "" && innerRef.current) {
+            innerRef.current.value = ""; // Set the desired option value
+        }
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange, innerValue]);
+    }, [onChange, 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
@@ -1925,13 +1926,18 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
         htmlFor,
         className,
         dataTestId,
-        helpText,
+        helpText: (renderAsInvalid && errorMessage) || helpText,
         helpAddon,
         tip,
         label,
         disabled, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: handleChange, value: selectedOption, defaultValue: selectedOption }))] }));
+                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                    // If theres no value, set the inner value to an empty string
+                    // A native select can not have a null value
+                    // So even if react-select sends a null value, we need to convert it to an empty string
+                    setInnerValue(!e ? "" : e.value);
+                }, value: selectedOption, defaultValue: selectedOption }))] }));
 });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.444",
+  "version": "0.0.448",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {