0
196
ViewsMaterial Ui label breaking in Select component
i have been trying to implement a select component, nothing as I have ever done before, But suddenly my mui-select component is breaking, Below is the image of the bug/issue i am facing
The label of the select element is no longer in sync with the select component itself Here is the code:
<FormControl size="small" fullWidth>
<InputLabel id="demo-simple-select-helper">
Marital Status
</InputLabel>
<Select
labelId="demo-simple-select-helper"
id="demo-simple-select-helper"
label="Marital Status"
defaultValue=""
{...getFieldProps('pf.maritalStatus')}
>
<MenuItem value="married">Married</MenuItem>
<MenuItem value="unmarried">Unmarried</MenuItem>
<MenuItem value="widow">Widow</MenuItem>
<MenuItem value="widower">Widower</MenuItem>
<MenuItem value="divorcee">Divorcee</MenuItem>
</Select>
</FormControl>
Is there anything wrong i am doing here?
Here is the snippet used in the mui docs
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Please can anyone tell what's wrong i am doing here?
·
Juan Pablo Isaza
1 answers
Answer question0
const [age,setAge] = React.useState();
function handleChange(e){
setAge(e.currentTarget.value);
}
return(
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
)
·
Juan Pablo Isaza
Report
Answer question