You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
<Fieldname="field3"required>{({ input, meta, ...rest})=>(<div><label>Required Field*</label><input{...input}{...rest}// required is included heretype="text"/>{meta.error&&meta.touched&&(<span>{meta.error}</span>)}</div>)}</Field>
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.What is the expected behavior?
Expected is that parent
<Field required/>
doesn't pass therequired
prop to underlyinginput
in both cases OR that it does send ALL the additional parameters to theinput
in both cases.Sandbox Link + environment
https://codesandbox.io/s/wqrywv2lkw
The text was updated successfully, but these errors were encountered: