@ttoss/forms 0.15.12 → 0.15.14

package/README.md

@@ -117,4 +117,35 @@ return (
 );
 ```
 
+When your Select options depends on fetched values, the manual defaultValue setting is required.
+
+```tsx
+const RenderForm = () => {
+  const formMethods = useForm();
+  const { resetField } = formMethods;
+  const [formOptions, setFormOptions] = useState<
+    {
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  useEffect(() => {
+    // some fetch operation here
+
+    setFormOptions(RADIO_OPTIONS);
+
+    // fetch are side effects, so, if the options depends on fetch and have a default value, the field should be reseted in the effect
+    resetField('car', { defaultValue: 'Ferrari' });
+  }, []);
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormFieldSelect name="car" label="Cars" options={formOptions} />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```
+
 > NOTE: You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`

package/dist/esm/index.js

@@ -270,14 +270,15 @@ var checkDefaultValue = (options, defaultValue, placeholder) => {
   });
   if (placeholder && hasEmptyValue) return "";
   if (placeholder && !hasEmptyValue) {
-    options.push({
-      label: "",
+    options.unshift({
+      label: placeholder,
       value: ""
     });
     return "";
   }
   if (!placeholder && defaultValue) return defaultValue;
-  return options[0].value;
+  if (options.length === 0) return "";
+  return options?.[0]?.value;
 };
 var FormFieldSelect = ({
   label,

package/dist/index.js

@@ -321,14 +321,15 @@ var checkDefaultValue = (options, defaultValue, placeholder) => {
   });
   if (placeholder && hasEmptyValue) return "";
   if (placeholder && !hasEmptyValue) {
-    options.push({
-      label: "",
+    options.unshift({
+      label: placeholder,
       value: ""
     });
     return "";
   }
   if (!placeholder && defaultValue) return defaultValue;
-  return options[0].value;
+  if (options.length === 0) return "";
+  return options?.[0]?.value;
 };
 var FormFieldSelect = ({
   label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.15.12",
+  "version": "0.15.14",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.29.5",
     "@ttoss/test-utils": "^1.21.5",
-    "@ttoss/ui": "^1.34.0",
+    "@ttoss/ui": "^1.34.1",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.37",
     "jest": "^29.5.0",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "85c81ad0d34207a3bdaa8cb907619f8e70837094"
+  "gitHead": "b473ec0322fbe1a459d81339aab3de60d6bebc9a"
 }

package/src/FormFieldSelect.tsx

@@ -22,14 +22,15 @@ const checkDefaultValue = (
 
   if (placeholder && hasEmptyValue) return '';
   if (placeholder && !hasEmptyValue) {
-    options.push({
-      label: '',
+    options.unshift({
+      label: placeholder,
       value: '',
     });
     return '';
   }
   if (!placeholder && defaultValue) return defaultValue;
-  return options[0].value;
+  if (options.length === 0) return '';
+  return options?.[0]?.value;
 };
 
 export const FormFieldSelect = <