FormField: required prop not passed to control

[jeffcarbs]

Steps

1. Pass required prop to form field, e.g. <Form.Field control={Input} required />

Expected Result

required prop would be passed to Input

Actual Result

required prop not passed to Input

Version

0.61.2

Testcase

http://codepen.io/jeffcarbs/pen/JbWLYa

---

The issue is that Form.Field has a required prop (which applies the required class to the wrapping div.field element) so it "consumes" the prop. This means it never gets passed to the Input. As you can see in the codepen where I manually used <Input required />, modern browsers will automatically prevent the form submission if a required field is blank (among other validations). I think in addition to using the required prop for the className the Form.Field should pass required down to the control.

[levithomason]

The issue/feature

Restating the issue, we pass all "unhandled" props to the underlying control. So, the required prop is consumed and applied to the FormField, rather than the Input:

The issue here is that we don't know which props to pass down since you can use any control: <Form.Field control={???} />. There is the (slim?) possibility that a user passed a component that doesn't handle required or one of the many other props that make sense to pass down to most controls (like Inputs).

Ideas

Pass a hard list of props

One possible solution here is to define a hard list of props that we pass down to certain components. What I don't like here is that it is naive, only applying to certain props for certain control components. I'd prefer a more robust solution that applies to any prop for any component.

We actually already do this for the label prop for our own Checkbox and Radio components, otherwise the field would get a label, but the checkbox would not. So, we check for those components and explicitly pass along the label to the control instead of the field.

Provide a controlProps FormField prop

Another solution we considered was some kind of controlProps={{ ... }} prop that would be passed directly to the underlying control's props. This would allow passing any prop to any control component, while still using the shorthand API.

Always pass very common control props

We could argue that some props, like required, are so common and globally applicable that we should always pass these to the control. I think I would actually be in favor of this and later backpedal if any real world issues were proven to exist.

The required prop would be passed to the field and the underlying control. The field shows the red * and the control would then have the HTML attribute for validation.

Just use the subcomponent API

The flip side to this story is that shorthand is meant to cover most but not all cases. Using the already defined subcomponent API would solve this as well, with no further changes or library logic:

<Form.Field>
  <Input required />
</Form.Field>

---

What think ye?

[levithomason]

Looks like we're already in agreement here. Let's just pass required down to the underlying control. 👍

[levithomason]

See #917