MUI DatePicker - 放置弹出对话框的问题

Question

我正在使用 MUI v6.0.2，并且遇到了 popper 放置问题。当我向上滚动并尝试打开日期选择器时，它不会在输入的顶部打开，而是在页面上方的某个位置打开。正如预期的那样，底部放置效果很好。但顶部的放置位置看起来有些问题。

当前行为

我的依赖：

"@mui/x-date-pickers": "^6.0.4",

导入：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

预期行为

这是我的代码。我没有将任何其他属性传递给组件。

<Box marginTop={'1000px'}>
  <h2>Date picker</h2>
  <DatePicker />
</Box>

Answer 1

正如 @Lukasz Wach 在上面的评论中提到的，传递这样的渲染函数将导致字段重新安装每个渲染，这可能会导致一些问题。

就我而言，我正在这样做：

slots={{
  layout: EndDatePickerLayout,
  actionBar: EndDatePickerActionBar,
  textField: params => (
    <TextField variant="outlined" {...params} value={isLatestClicked ? 'Latest' : params.value} />
  ),
 }}

这导致单击文本字段中的日历图标后打开的对话框重新安装在错误的位置（左上角）。

我现在最终做的是：

slots={{
  layout: EndDatePickerLayout,
  actionBar: EndDatePickerActionBar,
  textField: CustomTextField,
}}
slotProps={{
  textField: { isLatestClicked } as any,
...
...
}}

然后在一个单独的文件中我有我的自定义文本字段：

export function CustomTextField(props: TextFieldProps & { isLatestClicked: boolean }) {
  const { isLatestClicked, ...otherProps } = props;
  return <TextField {...otherProps} value={isLatestClicked ? 'Latest' : otherProps.value} variant="outlined" size="small" />;
}

参考：https://github.com/mui/mui-x/issues/8411#issuecomment-1486252630，https://github.com/mui/mui-x/issues/8411#issuecomment-1486252630

Answer 2

我有完全相同的问题，我正在使用 DesktopDatePicker (x-date-pickers": "^6.2.1") 和 TextField 。在第一次打开操作时，它会呈现在正确的位置，锚定到输入。但是当我尝试时要更改年份，波普尔跳到左上角。