Utilizing material ui, I am facing two issues with a multiple select component that I cannot seem to resolve:
- While selecting an item, the dropdown moves around (I have already attempted solutions like MenuProps={{ variant: "menu", getContentAnchorEl: null }} -> see code)
- I would prefer the dropdown to open on hover -> I have reviewed the Select API and Menu Props API, but could not find a solution for this.
Could anyone direct me towards a solution?
Below is my code:
<FormControl
id={title}
className={classes.formControl}
variant="filled"
size="small"
>
<InputLabel id={title}>
{title}
</InputLabel>
<Select
MenuProps={
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4 + ITEM_PADDING_TOP,
width: 270,
},
},
variant: "menu",
getContentAnchorEl: null,
}
disableUnderline
labelId={title}
id={includes}
multiple
value={selectedValues}
input={<Input />}
renderValue={(selected) => (
<div>
{selected.map((value) => (
<Chip key={value} label={value}/>
))}
</div>
)}
>
<MenuItem
key={filter.categoryNameWebsite}
value={filter.categoryNameWebsite}
>
//some logic
</MenuItem>
</Select>
</FormControl>EDIT:
Question 1:
With the help of NearHuscarl, I discovered that the jumping issue was not related to material UI. The problem was that with each selected dropdown item, the URL path changed. Since I am using next.js router (useRouter), the "scroll" option defaults to "true". Changing it to "false" resolved the jumping issue :)
Question 2: Refer to the solution provided by NearHuscarl.