React Date Picker is Being Behind Behind Overflow Parent (popover fixed placement issue)

Question

我正在尝试从 material UI 菜单项中打开来自 React 日期选择器的日期选择弹出窗口。

我已将我的菜单项设为反应日期选择器输入字段。问题是我的输入字段是选择日期弹出窗口的锚点，弹出窗口在我的菜单中打开。我希望弹出窗口在菜单上方打开。

react datepicker 文档没有很多关于 popover 放置的信息。知道如何实现吗？

here is a screenshot of the unwanted behavior with the popover being "trapped" in the menu

我的菜单代码快速概览：

// this icon is the anchor for the menu
<MoreIcon onClick={handleClick} />
<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  //this is my Date picker component
  <Reschedule handleReschedule={handleReschedule} />
</Menu>

和我的日期选择器组件（将自定义输入字段作为菜单项）：

export const Reschedule = ({ handleReschedule }) => {
  // ref to the datePicker to control open/close
  const calendar = createRef();

  //to Open the date picker
  const openDatepicker = (e) => {
    calendar.current.setOpen(true);
  };
  //to close the date picker
  const closeDatepicker = (e) => {
    calendar.current.setOpen(false);
  };

  const RescheduleButton = ({ onClick }) => {
    return (
      <MenuItem
        className="overdue__rescheduleButton"
        onClick={() => {
          onClick();
        }}
      >
        Reschedule
      </MenuItem>
    );
  };

  return (
    <DatePicker
      selected={null}
      onChange={(date) => {
        handleReschedule(date);
      }}
      ref={calendar}
      minDate={subDays(new Date(), 0)}
      customInput={<RescheduleButton onClick={openDatepicker} />}
      popperPlacement="bottom-end"
    />
  );
};

提前致谢

Answer 1

在撰写本文时此道具尚未记录，但您可以使用 popperProps 来配置 popper 属性 - 他们使用 Popper.js。在您的情况下，使用 positionFixed: true 以便它相对于视口的初始包含块（即 <html>）

<DatePicker
  popperProps={{
    positionFixed: true // use this to make the popper position: fixed
  }}
/>

https://github.com/Hacker0x01/react-datepicker/blob/master/src/popper_component.jsx

Answer 2

实现此目的的另一种方法是为 React 日期选择器提供要将选择器附加到的 div 的 ID。例如，在您的应用程序的最顶部附近的 div：

<DatePicker
  portalId="root"
/>

React Date Picker is Being Behind Behind Overflow Parent (popover fixed placement issue)

React Date Picker is Being Hidden Behind Overflow Parent (popover fixed placement issue)

reactjs

material-ui

react-datepicker

popper.js