Search code examples
reactjsmaterial-uireact-datepickerpopper.js

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

I'm trying to have the date selection popover from react datepicker to open from a material UI menu item.

I have made my menu item the react datepicker input field. The issue is that my input field is the anchor for the selection date popover and the popover opens within my menu. I would like the popover to open above the menu.

The react datepicker documentation doesn't have a lot of information about the popover placement. Any idea how to achieve that ?

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

quick overview of my menu code:

// 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>

and my date picker component (with a custom input field as a Menu Item):

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"
    />
  );
};

Thanks in advance

Solution

  • This prop is not documented as of this writing but you can use popperProps to configure the popper properties - they use Popper.js. In your case use positionFixed: true so that it would be relative to the initial containing block of the viewport (i.e., <html>)

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

    Edit eloquent-dream-jxlzp

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