Material Ui - Add required attribute to a TextField in "select" mode

Question

I am trying to make "required" a TextField in select mode. I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.

Please check 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 really) I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".

Answer 1

Material Ui provides another component Native Select to handle this kind of native validation.

Please check this example

Answer 2

It was recently implemented in material ui. If you upgrade @material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402