formik: setFieldValue to undefined deletes the value from values and prevents errors from showing / touched being updated on submit

Still unresolved in 2023?

@zyofeng You’re right, my apologies. I failed to paste the important part, which was a replacement of setIn that I was using that changes the default setIn behavior. I’ve updated my original comment to include it.

I got the same problem. The onChange function set field value to undefined. And then the form shows no error message. Because the errors and values object has delete the field key. 2023-11-02 I am crazy.

also, this is the issue when using initialValues and you don’t use all values, user click “submit” and we never show error on fields that are emptym because of undefined

For anyone who has run into this issue and needs a workaround, one solution is to create your own wrapper around Formik’s setFieldValue function to override its behavior. You can do this by either wrapping Formik entirely (which is more work but allows for more seamless integration) or just calling a surrogate function manually.

Here is what a surrogate function would look like:

function setFieldValue(formik: Formik<Values>, field: string, value: any, shouldValidate?: boolean): void {
  // Override default behavior by forcing undefined to be set on the state
  if (value === undefined) {
    const values = setIn(formik.state.values, field, undefined);
    formik.setValues(values);

    const willValidate = shouldValidate === undefined ? this.props.validateOnChange : shouldValidate;
    if (willValidate) {
      formik.validateForm(values);
    }
  } else {
    // Use default behavior for normal values
    formik.setFieldValue(field, value, shouldValidate);
  }
}

This doesn’t work as setIn is the one that removes the obj if value is undefined. see line 130

https://github.com/formium/formik/blob/2d613c11a67b1c1f5189e21b8d61a9dd8a2d0a2e/packages/formik/src/utils.ts

For anyone who has run into this issue and needs a workaround, one solution is to create your own wrapper around Formik’s setFieldValue function to override its behavior. You can do this by either wrapping Formik entirely (which is more work but allows for more seamless integration) or just calling a surrogate function manually.

Here is what a surrogate function would look like:

function setFieldValue(formik: Formik<Values>, field: string, value: any, shouldValidate?: boolean): void {
  // Override default behavior by forcing undefined to be set on the state
  if (value === undefined) {
    const values = setIn(formik.state.values, field, undefined);
    formik.setValues(values);

    const willValidate = shouldValidate === undefined ? this.props.validateOnChange : shouldValidate;
    if (willValidate) {
      formik.validateForm(values);
    }
  } else {
    // Use default behavior for normal values
    formik.setFieldValue(field, value, shouldValidate);
  }
}

/**
 * A copy of Formik's setIn function, except it assigns undefined instead of deleting the property if the value
 * being set is undefined.
 * https://github.com/jaredpalmer/formik/issues/2332
 */
function setIn(obj: any, path: string, value: any): any {
  const res: any = _.clone(obj); // This keeps inheritance when obj is a class
  let resVal: any = res;
  let i = 0;
  const pathArray = _.toPath(path);

  for (; i < pathArray.length - 1; i++) {
    const currentPath: string = pathArray[i];
    const currentObj: any = getIn(obj, pathArray.slice(0, i + 1));

    if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
      resVal = resVal[currentPath] = _.clone(currentObj);
    } else {
      const nextPath: string = pathArray[i + 1];
      resVal = resVal[currentPath]
        = isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
    }
  }

  // Return original object if new value is the same as current
  if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
    return obj;
  }

  if (value === undefined) {
    resVal[pathArray[i]] = undefined;
  } else {
    resVal[pathArray[i]] = value;
  }

  // If the path array has a single element, the loop did not run.
  // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.
  if (i === 0 && value === undefined) {
    res[pathArray[i]] = undefined;
  }

  return res;
}

I agree, formik should be setting the value to undefined, not deleting the property from the values object. Many operations in Formik rely on the existence of the entry in the values object in order to know what is errored/touched, and by deleting, it is wiping that data.

These lines seem to be the culprits, although there may be others: https://github.com/jaredpalmer/formik/blob/master/packages/formik/src/utils.ts#L131 https://github.com/jaredpalmer/formik/blob/master/packages/formik/src/utils.ts#L139