Estoy usando material ui y tengo un componente de selección múltiple. Tengo 2 problemas, que simplemente no puedo resolver:

1. al seleccionar un elemento, el menú desplegable salta (ya probé soluciones como MenuProps={{ variant: "menu", getContentAnchorEl: null }} -> ver código)
2. Me gustaría que el menú desplegable se abra al pasar el mouse -> Revisé la API de selección y la API de accesorios de menú , pero no puedo encontrar una solución para eso.

¿Podría alguien señalarme en la dirección correcta?

Aquí está mi código:

 <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>

EDITAR:

Pregunta 1: Con la ayuda de NearHuscarl, descubrí que el salto no está relacionado con la interfaz de usuario del material. Mi problema fue: con cada elemento que se seleccionó del menú desplegable, la ruta de la URL cambió. Como estoy usando el enrutador next.js ( useRouter ), la opción "desplazarse" es "verdadera" de forma predeterminada. Tuve que cambiarlo a "falso". Ahora el salto finalmente se ha ido :)

Pregunta 2: Consulte la solución proporcionada por NearHuscarl.