[Syncing] formik/Select

[yedhink]

Points to note

• Component in action - formik/Select.js
• Github Urls to this component:
  • neeto-ui/formik/Select.js
  • NitroUI/Formik/Select.js
• :green_circle: Green color signifies how that particular line is written in neeto-ui package
• :red_circle: Red color signifies how that particular line is written in NitroUI internals

Sync Required or Not

• Are there significant changes for formik/Select.js that needs to be synced to neeto-ui package from NitroUI? - No
• This block seems unnecessary to me:

• const targetAttr = field.name.split(".")[0];
• if (Array.isArray(form.values[targetAttr])) {
• formValues[targetAttr] = Object.values(formValues[targetAttr]);
• }
• setValues(formValues);

• @edwinbbu I need some clarification on whether to sync this part from NitroUI to neetoui or not. From my understanding, no need. The current neetoui version will do the job.

Diff

--- NitroUI/formik/Select.js    2020-11-28 16:54:23.962073200 +0530
+++ neetoui-official/formik/Select.js   2020-11-28 16:49:18.771103400 +0530
@@ -21,7 +21,7 @@
         selectedValues.includes(optionValue(option))
       );
     } else {
-      return options.find(option => optionValue(option) === field.value) || "";
+      return options.find(option => optionValue(option) === field.value);
     }
   };

@@ -31,25 +31,16 @@

   return (
     <Field name={name}>
-      {({ field, form, meta }) => (
+      {({ field, form }) => (
         <Select
           options={options}
           name={field.name}
           value={options ? selectedOptions(options, field) : "Select an option"}
-          onChange={value => {
-            const formValues = R.set(
-              nestedLens(field.name),
-              value,
-              form.values
-            );
-            const targetAttr = field.name.split(".")[0];
-            if (Array.isArray(form.values[targetAttr])) {
-              formValues[targetAttr] = Object.values(formValues[targetAttr]);
-            }
-            setValues(formValues);
-          }}
-          onBlur={() => form.setFieldTouched(name, true)}
-          error={meta.touched && R.path(field.name.split("."), form.errors)}
+          onChange={value =>
+            setValues(R.set(nestedLens(field.name), value, form.values))
+          }
+          onBlur={field.onBlur}
+          error={form.errors[field.name]}
           getOptionValue={getOptionValue || (option => option.value)}
           isMulti={!!isMulti}
           {...rest}

[edwinbbu]

@dineshpanda Can you provide some clarifications.

[yedhink]

@edwinbbu @goutham-subramanyam

Let me know if i can get a confirmation on whether to sync this component. Refer: https://github.com/bigbinary/neeto-ui/issues/55#issue-753197108

[dineshpanda]

@dineshpanda Can you provide some clarifications.

Sorry for responding after so many days. I don't know why I'm not getting GitHub notifications sometime.

@edwinbbu When we have initial values say {languages: { 0: "Ruby", 1: "JS", 2: "Java" }} for a Formik form with a Select field name languages where languages is a FieldArray. By default, in this case Formik was not handling nested values.

That was the primary reason to use Ramda helpers to set nested values correctly. However I see a solution proposed by @yedhink to use Formik's setValues and use the nested field name as a variable key to update the form values, which would handle the nested case as well. Ex: setValues([field.name]: field.value)

I wish Formik could handle this case by default since setValues is built in and we are providing a name to each field.

@yedhink's solution would simplify the onChange handler in Select component and that has been merged to neeto-help.

I have informed @yedhink regarding the issues to show validation error messages in forms where FieldArray is being used.

[yedhink]

@dineshpanda

Yup. I have taken care of the error scenario as well that you had pointed out. Will update the PR over here soon. Will cc you so that you could also give some input, on whether we need to change anything.