Material-ui: You have provided an out-of-range value `Insegnante` for the select (name="professione") component.
Hi I'm working with material-ui version 4.6.1 and I've a problem using a select.
The complete error is:
Material-UI: you have provided an out-of-range value
Teacherfor the select (name="work") component.
Consider providing a value that matches one of the available options or ''.
The available values areThere are no valid options
The line that generates this error is the following
{/* SELECT */}
<Select onChange={handleChange}
onBlur={handleBlur}
value={values[name]}
name={name}
disableUnderline={true}
disabled={!isEditModeActive}
>
{
Array.isArray(options) && options.length > 0 ?
options.map((option: any, index: number) => (
<MenuItem value={option} key={${index}}>{option}</MenuItem>
)) :
// DEFAULT
<MenuItem disabled={true} value={NO_OPTIONS_LABEL}>{NO_OPTIONS_LABEL}</MenuItem>
}
</Select>
I've writed all as a normal select...can someone help me?
GiovanniGiampaolo
All 4 comments
The issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 馃懛 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!
oliviertassinari
on 22 Nov 2019
You should be able to fix the warning by making sure the value you provide match an existing option item.
oliviertassinari
on 22 Nov 2019
@oliviertassinari Actually in my case I do provide a valid value to begin with though I have 2 select boxes (applicantTypeID and requestTypeID in the below code snippet) and they are inter dependent i.e. when user chose a value in applicant type select list, I filter options for the 2nd list which are request types so, if user keep changing his\her selection in the applicant type select box, the selected value in the 2nd select may become obsolete. I even tried to reset user selection in the 2nd select but it doesn't work. the onChange={handleApplicantTypeChange} event doesn't even fire. There got to be something wrong
const handleApplicantTypeChange =(e) => {
console.log("Resetting requestTypeID");
document.getElementById("requestTypeID").value = ''
}
<Grid item lg={4} md={5} xs={12}>
<FormControl fullWidth>
<InputLabel htmlFor="applicantTypeID">
Applicant Type
</InputLabel>
<Field
component={Select}
type="text"
name="applicantTypeID"
validate={checkApplicantType}
onChange={handleApplicantTypeChange}
>
<MenuItem value="0">Select applicant type...</MenuItem>
{applicantTypes.map((option) => (
<MenuItem value={option.value} key={option.value}>
{option.key}
</MenuItem>
))}
</Field>
<FormHelperText error>
<ErrorMessage name="applicantTypeID" />
</FormHelperText>
</FormControl>
</Grid>
<Grid item lg={4} md={5} xs={12}>
<FormControl fullWidth>
<InputLabel htmlFor="requestTypeID">
Request Type
</InputLabel>
<Field
component={Select}
type="text"
name="requestTypeID"
validate={checkRequestType}
id="requestTypeID"
//onClick={checkRequestType}
>
<MenuItem value="0">Type of your request...</MenuItem>
{requestTypes.map((option) => (
<MenuItem value={option.value} key={option.value}>
{option.key}
</MenuItem>
))}
</Field>
<FormHelperText error>
<ErrorMessage name="requestTypeID" />
</FormHelperText>
</FormControl>
</Grid>
</Grid>
DewangS
on 26 Aug 2020
I had the same issue and fixed it with just setting a defaultValue = "" in my component
manuelbenitez
on 29 Oct 2020
Related issues
anthony-dandrea
路
3Comments
ghost
路
3Comments
FranBran
路
3Comments
ghost
路
3Comments
revskill10
路
3Comments
Most helpful comment
I had the same issue and fixed it with just setting a defaultValue = "" in my component