MUI：多选跳转

Question

我正在使用材料 ui 并且我有一个多选组件。 我有两个问题，我只是无法解决：

1. 选择项目时，下拉下降跳转（我已经尝试了像Menuprops = {{variant：“菜单”，getContentanchorel：null}} - >查看代码）
2. 我希望下拉菜单在悬停时打开 -> 我已经检查了Select API和Menu Props API，但我找不到解决方案。

有人能指出我正确的方向吗？

这是我的代码：

 <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

回答你的第二个问题。 如果您想在悬停/取消悬停时显示/隐藏MenuList ，您可以附加侦听器以了解用户何时悬停Input并离开Popover如下所示：

<Select
  open={open}
  onMouseEnter={handleOpen}
  onClose={handleClose}
  onOpen={handleOpen}
  MenuProps={{
    PaperProps: {
      onMouseLeave: handleClose,
      {...}
  }}
  {...}
>