Formik: Issues with Formik

[bduff9]

Hi there! I really like this library you have set up and have had little issue integrating in place of existing forms. I have a couple concerns, that are possible I am doing something wrong with. Since I love the idea of the plugin, I wanted to verify what I might be missing before anything else.

1. Are checkboxes supported? I don't see any mention of them in the docs nor in the issues, and they don't seem to work as I would expect. For instance, if I have 3 checkboxes with name "color" and each has a value of a color (i.e. red, blue, green) I would expect this to be retrieved as an array (i.e. if red and blue were checked, ['red', 'blue']) Currently, the value is ignored and its returned as true or undefined. This also makes validation difficult as in order to have checkboxes, I have to give them multiple names and then somehow validate that at least one of the names is checked, instead of validating that its an array of length that is at least 1.

2. What about radio buttons? These seem to be better handled as the actual value of the selected radio button is returned, however until one is changed, no value is returned, and I had an issue in my brief test of changing the value back after making a selection. For instance, if I have yes and no radio buttons, with no checked by default, the form first returns undefined for the radio buttons even though no is checked. Once I select Yes, the form does return yes, but then I am unable to re-select no.

3. Form elements in general seem to have some issues upfront. For instance, a select that I default the value of does not return a value upon submit. Similar to radio buttons, making a change does update it but this is counter intuitive. Additionally, the examples all list checking if the field has an error and is touched before showing an error which makes perfect sense to me ({errors.field_name && touched.field_name && ...}) However, if a field that is required is not touched, when submitted the form fails to submit but no error is shown. I think the initialization of the form in general needs some work, but in this one case, I would've imagined that if I ever click the submit button, Formik would set every field's touched value to true to avoid this issue.

I hope the above is clear without too much code as I am currently evaluating this library. If not, please let me know and I would be happy to provide additional details. Thanks again!

[jaredpalmer]

@bduff9 Formik handle's checkboxes exactly the way they are handled in the React documentation with true / false: https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs . However, you could probably write your own custom inputs to get the array behavior you described above.

I am working on a patch to fix touch behavior with select, radio, checkboxes now.

[jaredpalmer]

So after exploring various form libraries, the general consensus is to not automatically touch select, radio, and checkboxes onChange.

By setting validateOnChange: true, you can get validation to run on change and then not check to see if the field is touched to show an error.

With respect to select, radio, and checkboxes, I think you may want to double check how you have configured them.

// radio inputs
<label>
  <input
    name="color"
    type="radio"
    value="red"
    checked={values.thing === 'red'}
    onChange={handleChange}
    onBlur={handleBlur}
  />
  Red
</label>
<label>
  <input
    name="color"
    type="radio"
    value="blue"
    checked={values.thing === 'blue'}
    onChange={handleChange}
    onBlur={handleBlur}
  />
 Blue
</label>

// select
<select  
    name="color"
    value={values.color}
    onChange={handleChange}
    onBlur={handleBlur}
>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue" >Blue</option>
</select>

[bduff9]

Why was this closed? For point 1, I see what you are saying and while I don't like it, I am willing to concede the point. Though I would be interested in seeing what you mean by writing a custom input to handle it as I'm not sure how I would even go about that.

For point 2, I had it set up just like in your example, minus the onBlur handler (since it didn't make sense to me to have an onBlur handler in my radio button). If the onBlur handler is the problem, that's strange but I again am willing to concede it.

However, I'm not sure you addressed point 3 at all. What I am saying is that I have a select, for instance, that is set to a blank value i.e.

<select name="color" value={values.color} onBlur={handleBlur} onChange={handleChange}>
  <option value="">--Please Select a Color--</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>

...and that I have made color required with Yup (i.e. Yup.string().required()). However, if the user never changes the value and tries to submit the form, then the form fails to submit without any error message because I followed your documentation and put the following as the error message display:

{errors.color && touched.color && <div>{errors.color}</div>}

...which, because the select was never touched, does not display. Every other validation library I have ever used (most notably jQuery Validation) does a similar thing up front (errors are not shown until after the form control has been blurred, and then is shown more often like on keyup, UNLESS the form is attempted to be submitted, in which case all errors are immediately shown and all form controls act like they've been interacted with). Formik does not do this, and not only does it seem wrong based on other validation libraries, but it causes a real issue when my user tries to submit a form and cannot but is given 0 context for why they cannot. At this point the form just appears broken to them.

Is there a reason why it behaves this way that I do not understand? I see in your reply you are talking about onChange, but I'm not sure if that answers my question or not as I am talking about onSubmit, not onChange. In fact, I am explicitly saying onChange would not be called in my example above as the user would not interact with this form control to begin with.

[jaredpalmer]

https://codesandbox.io/s/vxv6Q4z5

Tried to recreate the behavior you described above but cannot. I'm getting an error exactly as expected if I try submit.

[jaredpalmer]

Re: touching fields.

Formik touches all fields before as soon as submit called: https://github.com/jaredpalmer/formik/blob/master/src/formik.tsx#L403

[ozluy]

Use setFieldValue function provided by Formik, I solved like this 🎉

 <RadioInput
              id="blue"
              value={values.color}
              name="color"
              checked={values.color === 'blue'}
              label="Blue"
              onBlur={handleBlur}
              onChange={() => {
                setFieldValue('color', 'blue')
              }}
            />

<RadioInput
              id="red"
              value={values.color}
              name="color"
              checked={values.color === 'red'}
              label="Red"
              onBlur={handleBlur}
              onChange={() => {
                setFieldValue('color', 'red')
              }}
            />

[Steffi3rd]

All this works if we set 'blue' and 'red' as string.

But how does it work when is generated by a loop, with dynamic value ?
I tried by replacing 'blue' by value, it doesn't work.

value is always changing with onChange.

        <input
          name={name}
          id={id}
          type="radio"
          value={value}
          checked={form.values[name] == value}
          onChange={onChange}
          onBlur={onBlur}
          {...props}
        />

[Steffi3rd]

Ok, found a solution

I have to set a initialValue to this input, which has the same as value at the beginning.
Then do all tests using initialValue

      <input
        name={name}
        id={id}
        type="radio"
        value={initialValue}
        checked={form.values[name] == initialValue}
        onChange={onChange}
        onBlur={onBlur}
        {...props}
      />

[annguyen0505]

why the Formik Field pass the undefined value to 'checkbox' input type? ('i already initialize the form values with gender field by true or 1 ')! when i set type to "check-box", the Field passed the value correctly