Please check out the demo I created on codesandbox by clicking here
I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have evenly divided the width among all child components by assigning each a fraction value of 1fr.
<Grid container>
<Grid xs item>
Filter By Site
</Grid>
<Grid xs item>
Filter By Group
</Grid>
<Grid xs item>
Filter By Cams
</Grid>
<Grid item xs>
<FormControl>
<InputLabel id="demo-multiple-name-label">Name</InputLabel>
<Select
labelId="demo-multiple-name-label"
id="demo-multiple-name"
multiple
value={personName}
onChange={handleChange}
input={<OutlinedInput label="Name" />}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>
One issue I am facing is that the Input element keeps expanding when selecting multiple options. How can I ensure it remains the same width as its sibling elements?