Formik: Values stale in onSubmit after setValues / setFieldValue

[hkung77]

I need to change some values after submit. but the values object doesn't seem to be updated after calling setValues / setFieldValue.

I wanted to ask this on the discord chat but the invite has expired.

[timc13]

this is because the values are updated under the hood via a setState call.

529 would help with this

[hkung77]

@timc13 Thank you so much for your response! I am looking forward to seeing this get merged!

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[yashaRO]

Has this bug (if it is considered a bug) ever been fixed, or is there an alternative method that's supposed to be used?

[Joead]

Interested in if/when this will be resolved. I'm trying to trim field values on submit (I'm not using Yup) and unless I'm missing something it seems that calling setValues in onSubmit is the logical way to do this?

[jaredpalmer]

@Joead If you don't need rerun validation with the trimmed values, you should trim your payload in your onSubmit function. If you need to trim your values prior to validation during a submission attempt, you should do so with either 1) custom input components or 2) a <form> like so.

<form onSubmit={e => { 
     setValues(trimMyStuffBeforeSubmit(values)); 
     handleSubmit(e); 
}}>
    ...
</form>

[Joead]

Thanks @jaredpalmer for your reply. I am using Formik with a render prop and am trying to trim values in onSubmit however the following is not working and the :

<Formik
  initialValues={{
    message: 'Trim me      ',
  }}
  onSubmit={(values, { setSubmitting, setValues }) => {
    const trimmedMessage = values.message.trim()
    setFieldValue('message', trimmedMessage)
    console.log(values)
    setSubmitting(false)
   }}
  render={....}
/>

[jaredpalmer]

Your onSubmit function does not execute if validation fails. To understand what happens when a user attempts to submit, check out this guide: https://jaredpalmer.com/formik/docs/guides/form-submission#submission-phases

See previous comment for desired behavior

[jaredpalmer]

Okay, I think I understand what you're having issues with.

Using setValues or setFieldValue inside of onSubmit will not update the values object that is in scope, but rather Formik's internal state. This is because submission does not magically rerun. You will need to modify values (i.e. the first parameter of onSubmit) directly. Perhaps a better way to think of onSubmit here is like onSubmit(valuesSnapshot: Values, actions: FormikActions) => void.

[Joead]

~I don't need to run validation though. I am just trying to trim the value before form submission.~

Posted your reply too quickly so editing....!

Ok so if I modify values directly in onSubmit then yes my submit handler gets the correct trimmed values, but how do I then pipe those trimmed values back to the UI inputs? I thought this was what setFieldValue and setValues is supposed to do?

Or is there a better place to trim field values other than in onSubmit?

[jaredpalmer]

Got it. You should just modify that object as you wish... and then sync it back to Formik.

<Formik 
   initialValues={{ message: 'Trim me ', }} 
   onSubmit={(values, { setSubmitting, setValues }) => { 
      const trimmedMessage = values.message.trim() 
-    setFieldValue('message', trimmedMessage)        
+    const payload = {...values, message: trimmedMessage } // Construct the new payload
+    setValues(payload) // Updates Formik's internal state
-     console.log(values) 
+    console.log(payload) 
      setSubmitting(false) 
     }} 
    render={....} />

[Joead]

Superb, worked perfectly 🎉

Thanks for your help. Fantastic lib 👍