formatOnBlur: Also run on submit

[ThiefMaster]

I'm using formatOnBlur to trim strings. This works fine, but if someone submits by pressing the enter key without leaving the field first, then no blur event happens and the string is submitted as-is without the formatter code running.

Or is there a better way to trim all strings before submission? format+formatOnBlur is pretty convenient because we're using a custom Field wrapper component that always sets it for string fields.

[erikras]

You could always do the formatting in your submit function before sending it off to the server. Something like:

function onSubmit(values) {
  stringKeys.forEach(key => values[key] = format(values[key]))
  ajax.send(values)
}

<Form onSubmit={onSubmit}/>

[ThiefMaster]

I hoped to avoid having to put code for this in every single submit function ;) Also, this wouldn't trigger validation errors for fields that cannot be empty or have a minimum length (which I want to apply on the trimmed value of course).

[erikras]

You make good points.

[erikras]

You could use jQuery! 🤣 I'm joking...

Because React Final Form is just responding to the events the browser gives it, this is going to require more complex communication between the Final Form engine and the fields.

[erikras]

Published fix in v5.1.0.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.