Semantic-ui-react: Form.Select required prop is not passed to <select> tag

[layershifter]

Hi, @mull

I agree with this idea, but select can't be required because it's hidden field, so we will have another error:

An invalid form control with name='' is not focusable.

In fact we doesn't have there input that can be really focused. My proposal is skip required prop if we deal with Dropdown in Form.Select.

@levithomason Do you have better ideas?

[mull]

Rather than being hidden could it not be hidden through CSS (I know that is not the responsibility of this project)? I get the problem for sure though in the use case of writing forms it essentially makes Form.Dropdown useless (without writing a bunch of additional validation code.) Looking forward to hearing what can be done, happy to try and assist!

[levithomason]

In the end, this won't work as intended, so we cannot implement it. Here is more info and context:

Regarding passing down extra props through shorthand, to clarify, the purpose of shorthand (i.e. Form.Select) is to power the majority of use cases. If shorthand fails to suit the purpose, you should use the full markup which gives you full control over every component and all props. This addresses the need to pass certain props down to the control element:

<Form.Field>
  <label>Select one</label>
  <Select />
<Form.Field>

Regarding the required prop, the Select (which is a Dropdown) does not support a required prop. The required prop in this use case would only be valid on the Form.Field for displaying the red asterisk. See SUI core example here.

Regarding form validation behavior associated with the required attribute, I don't think it is idiomatic React to delegate validation to the form controls themselves. Form state should be hoisted up the tree and validated independent of the Form and its controls.

We do have form validation on the radar including a list of many helpful packages that work with SUIR here, #407.

[karimjavith]

The Select does support required field
https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_select_required