react final form onBlur prevents validation

Question

Why adding an onBlur event prevents validation, like in the below example

<Field name="firstName" validate={required}>
    {({ input, meta }) => (
        <div>
        <label>First Name</label>
        <input {...input} onBlur={() => console.log('blur')} type="text" placeholder="First Name" />
        {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
    )}
</Field>

If I remove onBlur event validation, it works fine.How can add onBlur event as well as show validation too?

Here is a working example: https://codesandbox.io/s/qzz8wk076

Answer 1

Final-form relies on knowing when the fields trigger the blur event. You'll notice if you inspect the input argument provided to your render function, that react-final-form does this by adding an onBlur handler to this input argument that you then typically spread as a prop to your input element. If you want your own custom onBlur behaviour as well, you must call input.onBlur inside your custom blur handler, like the following:

<Field name="firstName" validate={required}>
  {({ input, meta }) => (
    <div>
      <label>First Name</label>
      <input
        {...input}
        onBlur={e => {
          console.log("blur");
          input.onBlur(e);
        }}
        type="text"
        placeholder="First Name"
      />
      {meta.error && meta.touched && <span>{meta.error}</span>}
    </div>
  )}
</Field>;