MUI：停止下拉菜单跳跃答案

【问题标题】：MUI: Stop dropdown from jumpingMUI：停止下拉菜单跳跃
【发布时间】：2022-11-14 07:30:52
【问题描述】：

我在 next.js 项目中使用 TextField 和 MenuItem 组件。

我在 TextField 中传递“选择”道具。这使得文本字段在内部使用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 的好帖子，但就我而言，问题没有解决。

【问题讨论】：

我认为您还应该将 variant 和 getContentAnchorEl 传递给 MenuProps 而不是 SelectProps 因为 variant: "menu" 不能在 Select 组件上使用。
谢谢，我也试过了。现在我收到错误“警告：React 无法识别 DOM 元素上的 getContentAnchorEl 属性。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 getcontentanchorel。如果您不小心通过了它从父组件中移除，从 DOM 元素中移除。”
如果您在文档中搜索，getContentAnchorEl 似乎根本不是 MUI 组件的属性。你确实有一个anchorEl属性
...但即使是小写的问题仍然存在。

标签： reactjs next.js material-ui

【解决方案1】：

我在这里可能是错的，但您只能使用文档中的示例之一：

<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

【讨论】：

是的，这是另一种方法。但我的代码也来自文档（部分选择）：mui.com/material-ui/react-text-field

【解决方案2】：

将 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

【讨论】：

我已经改变了一切。你的例子正在奏效。但是我的问题仍然存在..我不知道，也许它与next.js特别相关？！