MUI: multiple select jumps

Question

I'm using material ui and I have a multiple select component. I have 2 problems, which I'm just unable to solve:

1. when selecting an item the dropdown jumps around (I've already tried solutions like MenuProps={{ variant: "menu", getContentAnchorEl: null }} -> see code)
2. 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>

Answer 1

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,
      {...}
  }}
  {...}
>