[SelectField] An empty and required select field stays valid

[daniel-rodrigue]

Description:

In order to quickly validate if a form is valid, I use the form's checkValidity() function. The browser will go through all the form's elements and check for their validity. This works well for most of the field components except for a required SelectField component. An empty SelectField with a required property and an empty value is seen as valid.

NOTE: this is with v1 (I didn't try with v2 since we are not ready to move to v2 yet).

To Reproduce:

// constructor:
this.ref = React.createRef();

...
// render:
<form ref={this.ref}>
  <SelectField id="some_id" label="some_label" menuItems={choices} required value="" />
</form>

And later on...

if ( this.ref.current.checkValidity() ) {
  // valid
} else {
  // not valid and report error..
}

Expected behavior:

Should report the select field as invalid because it's required and empty.

Desktop:

• OS: [macOS Catalina]
• Browser [Chrome]
• Version [89.0.4389.82]

Additional info:

After debugging the code, I realized that the hidden input field (in SelectFieldInput) used to maintain the value is not mark as required. After testing that, the form's checkValidity still reports it as valid because it's a type hidden. Changing manually the type to a text field with a display:none style did the trick.

So it seems the fixes are:

1. SelectFieldToggle should pass the required property to SelectInputField.
2. SelectInputField should use a text form field, with the required attribute set and a style with display:none (likely also an aria-hidden is needed here).