MUI: open multiple select on hover & stop dropdown from jumping

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>

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.

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