required is passed to dom input but then it is not

[ackvf]

Are you submitting a bug report or a feature request?

Bug report

While investigating another issue (react-final-form-html5-validation#10, react-final-form-html5-validation#14), 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 in both examples.

What is the current behavior?

required is passed in first two examples, but not in third.

// first is ommited as it is using Field from react-final-form-html5-validation

<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>

What is the expected behavior?

Expected is that parent <Field required/> doesn't pass the required prop to underlying input in both cases OR that it does send ALL the additional parameters to the input in both cases.

Sandbox Link + environment

https://codesandbox.io/s/wqrywv2lkw

[Andarist]

The problem is that input & meta are provided by React Final Form, any other prop is put on the same object, so you can do this:

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

See https://codesandbox.io/s/determined-cache-v04f8