In my material-ui grid setup, each <Grid> contains a <Paper> element to define the grid's boundaries precisely.
Inside every <Paper>, there is a custom <DropDown> component (a modified version of Material-UI's Select). I want these DropDown components to occupy the entire space within their parent component (<Paper>).
The code and styling for my DropDown component closely resemble the example provided in the Material UI select documentation. The structure for each DropDown component is as follows:
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
function DropDown(props) {
const classes = useStyles();
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
const handleValueChange = (e) => {
if (props.alternateChangeHandler) {
props.alternateChangeHandler(props.currentEventID, props.id, e.target.value);
} else {
props.SEQuestionValueChange(props.currentEventID, props.id, e.target.value);
}
};
return <FormControl className={classes.formControl}>
{(props.label != null)
? <InputLabel htmlFor={props.id}>{props.label}</InputLabel>
: null
}
<NativeSelect
value={props.value}
onChange={handleValueChange}
inputProps={{
name: props.label,
id: props.id,
}}
>
{props.includeBlank ? <option key="nada" value="" /> : null}
{Object.keys(props.options).map((optionLabel, index) =>
<option key={optionLabel} value={props.options[optionLabel]}>{optionLabel}</option>
)}
</NativeSelect>
{/* <FormHelperText>Some important helper text</FormHelperText> */}
</FormControl>
I'm having trouble achieving the desired width, as can be seen in this screenshot:
https://i.sstatic.net/ifKDf.png
It's evident that the DropDowns are not filling the <Paper> element and do not adjust correctly based on the label size.
What could be causing this issue?