next.js MUI：停止下拉菜单跳转

7kqas0il 于 2022-11-23 发布在其他

关注(0)|答案(2)|浏览(173)

我在next.js项目中使用TextField和MenuItem组件。
我在TextField中传递了“select”属性，这使得文本字段在内部使用Select组件。
我的问题是：单击后，下拉菜单在屏幕上跳跃（下拉菜单在屏幕左上角显示1秒左右，最终移动到选择字段下方）。
下面是我的代码：

<div>
              <TextField
                focused
                sx={{ m: 0.5, width: 130 }}
                select
                id="birthdayD"
                name="birthdayD"
                label="Geburtstag"
                type="Geburtstag"
                SelectProps={{
                  MenuProps: {
                    sx: { maxHeight: 200 },
                  },
                  variant: "menu",
                  getContentAnchorEl: null,
                }}
              >
                {day.map((option) => (
                  <MenuItem key={option.value} value={option.value}>
                    {option.label}
                  </MenuItem>
                ))}
             </TextField>
    </div>

Here's是一篇关于为什么我应该使用variant: "menu", getContentAnchorEl: null的很棒的文章，但是在我的例子中，这个问题并没有得到解决。

next.js

来源：https://stackoverflow.com/questions/74402605/mui-stop-dropdown-from-jumping

2条答案

按热度按时间

ddarikpa1#

这里我可能是错的，但你可以使用文档中的一个示例：

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

https://mui.com/material-ui/react-select/#basic-select

赞(0）回复(0）举报 2022-11-23

ltskdhd12#

将variant属性更改为MenuProps并删除getContentAnchorEl，因为它在MUI v5中不再使用

<TextField
  focused
  sx={{ m: 0.5, width: 130 }}
  select
  id="birthdayD"
  name="birthdayD"
  label="Geburtstag"
  type="Geburtstag"
  SelectProps={{
    MenuProps: {
      sx: { maxHeight: 200 },
      variant: "menu"
    }
  }}
>
  {day.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

在此处检查live example

赞(0）回复(0）举报 2022-11-23

我来回答

next.js MUI：停止下拉菜单跳转

2条答案

相关问题

热门标签

最新问答