0
377
VistasMUI: open multiple select on hover & stop dropdown from jumping
I'm using material ui and I have a multiple select component. I have 2 problems, which I'm just unable to solve:
- when selecting an item the dropdown jumps around (I've already tried solutions like MenuProps={{ variant: "menu", getContentAnchorEl: null }} -> see code)
- I'd like the dropdown to open on hover -> I've checked the the Select API and Menu Props API but I can't find a solution for that.
Could someone point me in the right direction?
Here's 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 found out, that the jumping is not related to material UI. My problem was: With each item that was selected from the dropdown the URL path changed. Since I'm using next.js router (useRouter) the "scroll" option is by default "true". I had to change it to "false". Now the jumping is finally gone :)
Question 2: See solution provided by NearHuscarl.
1 Respuestas
Responde la pregunta0
To answer your second question. If you want to show/hide the MenuList on hover/unhover, you can attach the listeners to know when the user hovers the Input and leaves the Popover like below:
<Select
open={open}
onMouseEnter={handleOpen}
onClose={handleClose}
onOpen={handleOpen}
MenuProps={{
PaperProps: {
onMouseLeave: handleClose,
{...}
}}
{...}
>
