Why are the `...rest` properties not included in `input`

[ackvf]

One does not simply do this as usually:

<Field name="xTest" required type="number" render={({input}) => (
  return <input {...input}/>
)/>

It is now necessary to also pass ({input, ...rest}) to <input {...input} {...rest}/>, but careful, there also is the meta object!, so we must first consume it even though we don't need it. ({input, meta, ...rest})

I believe that it would make better sense to include all input props inside input property. If not, can you please shed some light on it and perhaps better documented in the example here? https://github.com/final-form/react-final-form-html5-validation

[erikras]

The reason is that this library is just a wrapper for Field, and Field, for good reason, keeps additional props out of the input object.

To accomplish what you're asking for would require React Final Form to provide some sort of optional inputProps interface where users could dump props that they want to end up inside input....which is a possibility.

[ackvf]

I see!, so basically if I was to use the standard react-final-form Field in a same way as in the code above, the props required and type would -not- be included in the input prop as well?

Okay, that's an implementation detail I wasn't aware of, I thought that all input's applicable properties are passed in the input prop. Anyway, what you say makes perfect sense, thanks for clarification.

[TrejGun]

it would be good to fix this

[ackvf]

While investigating another issue, I discovered that required IS sometimes passed to the underlying DOM input element... I believe this isn't right, though I wish if it was sent.

https://codesandbox.io/s/wqrywv2lkw

<div>
  <label>Required Field*</label>
  <Field
    name="field2"
    component="input"
    type="text"
    required // is passed to dom input
  />
</div>

<Field name="field3" required>
  {({ input, meta }) => (
    <div>
      <label>Required Field*</label>
      <input
        {...input} // required is not inclued here
        type="text"
      />
      {meta.error && meta.touched && <span>{meta.error}</span>}
    </div>
  )}
</Field>