Dialog内嵌Datepicker溢出失效问题排查与解决求助

我在Dialog对话框内创建表单时，使用Datepicker选择日期会出现弹窗消失、失效的情况，日历最后几日无法点击访问。

问题表现：日历弹窗被Dialog的边界截断，底部日期处于不可访问状态

以下是Dialog组件代码：

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  aria-labelledby="form-dialog-title"
  sx={{}}
>
  <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
  <DialogContent>
    <Box
      noValidate
      component="form"
      onSubmit={(evt) => handleSubmit(evt, filterData)}
      sx={{
        display: 'grid',
        flexDirection: 'column',
        m: 'auto',
        width: 'fit-content',
      }}
    >
      <CustomDatePicker
        id="fechaHasta"
        value={fechaHasta}
        startDate={fechaDesde}
        label="END date"
        callback={outputInputChange}
      />
      <DialogActions>
        <Button onClick={() => setOpen(false)} color="primary">
          Cancel
        </Button>
        <Button
          onClick={() => setOpen(false)}
          color="primary"
          type="submit"
        >
          Filter
        </Button>
      </DialogActions>
    </Box>
  </DialogContent>
</Dialog>

我已经尝试过用偏移修饰符调整位置，但没有效果。以下是Datepicker组件代码：

<DatePicker
  id={id}
  name={id}
  minDate={isEmpty(startDate) ? undefined : startDate}
  maxDate={isEmpty(endDate) ? undefined : endDate}
  label={label}
  variant="inline"
  inputVariant="outlined"
  format="dd/MM/yyyy"
  value={value}
  onChange={handleChange}
/>

注意：该问题仅在模态框包含表单时出现，求相关解决方案。

解决方案 #

1. 解除Dialog内容区域的溢出限制 #

Dialog默认会裁剪超出边界的内容，修改Dialog的样式，允许内容溢出显示：

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  aria-labelledby="form-dialog-title"
  sx={{
    '& .MuiDialogContent-root': {
      overflow: 'visible',
    }
  }}
>
  {/* 原有内容 */}
</Dialog>

2. 关闭Datepicker弹窗的溢出限制 #

给Datepicker添加popperProps，禁用自动溢出处理，让日历弹窗可以完整显示：

<DatePicker
  id={id}
  name={id}
  minDate={isEmpty(startDate) ? undefined : startDate}
  maxDate={isEmpty(endDate) ? undefined : endDate}
  label={label}
  variant="inline"
  inputVariant="outlined"
  format="dd/MM/yyyy"
  value={value}
  onChange={handleChange}
  popperProps={{
    modifiers: [
      {
        name: 'preventOverflow',
        enabled: false,
      }
    ]
  }}
/>

3. 调整表单容器的宽度设置 #

你当前表单Box用了width: 'fit-content'，可能导致容器过窄，日历弹窗被截断，修改为占满Dialog宽度并设置最小宽度：

<Box
  noValidate
  component="form"
  onSubmit={(evt) => handleSubmit(evt, filterData)}
  sx={{
    display: 'grid',
    flexDirection: 'column',
    m: 'auto',
    width: '100%',
    minWidth: '350px',
  }}
>
  {/* 原有内容 */}
</Box>

4. 确保Datepicker弹窗挂载到全局层级 #

如果Dialog使用了portal，可能导致Datepicker弹窗被层级覆盖，强制让Datepicker的弹窗挂载到body：

<DatePicker
  {/* 其他属性 */}
  PopperProps={{
    disablePortal: false,
    portalProps: {
      container: document.body,
    }
  }}
/>

内容的提问来源于stack exchange，提问作者troper