Formik FieldArray helper insert(0, '') doesn't add an (empty?) value to errors, now errors array is one element shorter than values

Viewed 267

i user formik and use insert(0, '') to add a new field at the beginning.

This updated the values array, but not the already filled errors array., e.g. in the meta of the field

  "value": [
    "A7046",
    "A7035",
    "A7037",
    "A7038",
    ""
  ],
  "error": [
    "not an code",
    "not an code",
    "not an code",
    "not an code"
  ],

becomes

  "value": [
    "",
    "A7046",
    "A7035",
    "A7037",
    "A7038",
    ""
  ],
  "error": [
    "not an code",
    "not an code",
    "not an code",
    "not an code"
  ],

so the values has five elements, error only four.

The effect now is that if

  • more than one field is added
  • and the last of the new filed is edited
  • and has an error
  • the error is on the first of the newly added fileds, notthe one edited.

This can be repeated. if editing form the bottom, with errors, the errors are shown from the top.

Even calling formik validateForm() with timeout doesn't help.

the used code, as snippet, so far is:

onClick={() => {
 arrayHelpers.insert(0, '');
 setTimeout(() => {
  validateForm();
 }, 200);
}}

The effect is that now all errors are applied to the previous field in the web form.

The insert had a bug adding the value to the errors array nut that was fixed long ago.

What's wrong here...?

Using push('') and appending the new empty field at the end works, but is bad for UX.

EDIT:

even if push() is used and multiple elements are added, the error of any of the new empty entries is added to the first added filed, as the error is just appended to the array and not filled up to the correct index of the new and edited value...

EDIT 2: simple codesandbox to show the behaviour.

0 Answers
Related