React-final-form: Checkbox validation only after focus change

[kiliw]

Are you submitting a bug report or a feature request?

Maybe it's a feature but it seems more like a bug.

What is the current behavior?

If I click the checkbox (which is required) and uncheck it, the validation only takes place once I click somewhere else.

What is the expected behavior?

I would expect the validation to happen as soon as I uncheck the box.

Sandbox Link

Please have a look at the example in codesandbox

What's your environment?

"react-final-form": "^6.3.0",
"final-form": "^4.16.1",

[marcklei]

<Field name="check one" validate={required} type="checkbox">
            {({ input, meta }) => (
                <div>
                  <label>Check 1</label>
                  <input {...input} type="checkbox" />
                  {meta.error && (meta.modified || meta.touched) && (
                    <span>{meta.error}</span>
                  )}
                </div>
              )
            }
          </Field>

This works for me. I think its because meta.touched only gets updated onBlur not onChange.

[shirbr510]

I have the same issue with Chrome's Autofill
only when I focus the form, the submit button becomes touched & not pristine

I have tried on:
final-form: 4.12.0
final-form-arrays: 1.1.2
react-final-form: 4.1.0
react-final-form-arrays: 2.0.3

I have then tried again after upgrading to the following (with no success):
final-form: 4.18.2
final-form-arrays: 3.0.1
react-final-form: 6.3.0
react-final-form-arrays: 3.1.0

[muriloSanto]

+1

[kiliw]

@marcklei Thank you for this workaround. I will use that for now but I would say it's not the expected behavior. So I guess either the docs are updated or it gets fixed.