I'm attempting to make the "required" attribute work for a TextField in select mode.
I attempted to add the required prop as shown in this code snippet, but it doesn't prevent the form submission if nothing is selected. However, it does add an asterisk (*) to the label.
You can view a demonstration in this sandbox
<TextField
id="select-currency"
select
label="Select"
value={this.state.currency}
onChange={this.handleChange("currency")}
required
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>UPDATE: (Clarification) I'm referring to HTML5 validation. In the sandbox example, there are both Select and Text fields. Setting the text field as required will trigger the native HTML5 error message saying "This field is required", but this is not the case for the "select" field.