onBlur validator hasn't been fired on leaving a field if it has multiple input tags

[arturasmckwcz]

It actually is fired upon submit event. this is sample code:

        <form.Field
          name="certMeaslesVaccination"
          validators={{
            onBlur: () => {
              console.log(
                "DEBUG:BecomeVolunteer:certMeaslesVaccination: Leaving...",
              );
              return undefined;
            },
          }}
        >
          {field => (
            <>
              <input
                name="certMeaslesVaccination"
                type="radio"
                onChange={() => field.handleChange(true)}
              />
              <input
                name="certMeaslesVaccination"
                type="radio"
                onChange={() => field.handleChange(false)}
              />
            </>
          )}
        </form.Field>

[Balastrong]

For a radio button I'd probably go with an onChange validator, but in your specific case if you want Form to react to blur events you have to pass the handler to your input, like so:

<input
  name="certMeaslesVaccination"
  type="radio"
  onChange={() => field.handleChange(true)}
+ onBlur={field.handleBlur}
/>
<input
  name="certMeaslesVaccination"
  type="radio"
  onChange={() => field.handleChange(false)}
+ onBlur={field.handleBlur}
/>

[arturasmckwcz]

yeah it helped a lot, thank you!
instead of adding onBlur attr I actually added calling field.handleBlur() to onChange fn and it immediately removes error without waiting for a user clicking somewhere else.

[Balastrong]

Calling the blur handler on change seems like an unwanted side effect if I was reading your code.

What made you use the onBlur validator and not the onChange one instead?

[arturasmckwcz]

yeah your'e absolutely right it's no longer leaving the field event semantically, onChange goes