React Final Form Arrays blurring custom fields

539 views Asked by At

I'm using Final Form arrays to dynamically render custom fields that consist of two text fields, both of which are validated.

I'm not sure how to go about blurring the fields individually. This is what I currently have:

<FieldArray name="customField">
  {({ fields }) => {
        return fields.map((name, index) => {
             return (
                 <Field name={name}>
                  {(props) => {
                    <CustomInput
                      onBlur={props.input.onBlur}
                   }
                 </Field>

And then in CustomInput:

<>
<TextField name='first' onBlur={onBlur} />
<TextField name='second' onBlur={onBlur} />
</>

The problem with this approach is that whenever the first TextField is blurred, both of them get validated (instead of just the first one).

Is something analogous to this

<TextField name='first' onBlur={e => onBlur(e, 'first')} />
<TextField name='first' onBlur={e => onBlur(e, 'second')} />

possible?

0

There are 0 answers