react-modal内点击react-datepicker弹日历时如何自动扩展尺寸

问题现象 #

初始加载模态框时，尺寸可正常适配内部内容；点击日期输入框唤起react-datepicker日历面板后，模态框不会自动扩展高度，导致日历面板显示溢出、展示异常。

• 点击日期选择器前效果：
  
• 点击日期选择器后效果：
  

问题复现代码 #

import React, { useState } from 'react';
import Modal from 'react-modal';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};

export default function TestPage2() {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  const [startDate, setStartDate] = useState(new Date());

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
        style={customStyles}
      >
        <h3>Prior to Date Picker</h3>
        <label htmlFor="Checkin Date">Checkin Date</label>
        <DatePicker
          selected={startDate}
          dateFormat="d MMMM yyyy"
          name="checkinDate"
          onChange={(date, event) => {
            if (date) {
              setStartDate(date)
            }
          }}
        />
        <h3>After Date Picker</h3>
      </Modal>
    </div>
  );
}

问题原因 #

react-datepicker 默认弹出的日历面板采用绝对定位渲染，脱离普通文档流，react-modal 初始化完成后会固定计算一次内容区高度，绝对定位的面板展开时不会触发父容器高度重算，因此模态框不会自动扩展。

修复方案 #

采用监听日历面板开关状态、动态调整模态框最小高度的方案实现自适应，改动最小且无样式兼容问题，修改后代码如下：

import React, { useState } from 'react';
import Modal from 'react-modal';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function TestPage2() {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  const [startDate, setStartDate] = useState(new Date());
  // 标记日历面板是否打开
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);

  // 动态生成模态框样式，日历打开时追加足够的最小高度容纳面板
  const customStyles = {
    content: {
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
      overflow: 'visible', // 允许内容溢出显示，避免裁剪日历面板
      // 日历默认高度约340px，打开时给内容区追加对应底部留白即可，可根据实际业务调整
      minHeight: isCalendarOpen ? '480px' : 'auto',
      transition: 'min-height 0.2s ease' // 可选：添加过渡动画提升交互体验
    },
  };

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
    setIsCalendarOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
        style={customStyles}
      >
        <h3>Prior to Date Picker</h3>
        <label htmlFor="Checkin Date">Checkin Date</label>
        <DatePicker
          selected={startDate}
          dateFormat="d MMMM yyyy"
          name="checkinDate"
          // 监听日历开关事件，同步状态
          onCalendarOpen={() => setIsCalendarOpen(true)}
          onCalendarClose={() => setIsCalendarOpen(false)}
          onChange={(date) => {
            if (date) {
              setStartDate(date)
            }
          }}
        />
        <h3>After Date Picker</h3>
      </Modal>
    </div>
  );
}

其他可选方案 #

• 给react-datepicker添加inline属性让日历常显在输入框下方，不使用弹出层，此时日历属于正常文档流，模态框会自动适配高度，适合表单类固定展示日期选择的场景。
• 配置react-datepicker的portalId属性，将日历面板挂载到模态框的content节点下，同时覆盖日历默认样式将position: absolute改为position: relative，让面板撑开文档流，不需要手动控制高度。

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