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

Asked 8/10, 2020 at 0:58 Answered 15/2, 2023 at 11:41

Solved reactjs material-ui react-datepicker popper.js

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

Shot answered 8/10, 2020 at 0:58 Comment(2)

are you able to recreate this issue in codesandbox.io? – Thanh 8/10, 2020 at 2:15

recreated in codesandbox: codesandbox.io/s/… – Shot 8/10, 2020 at 4:55

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

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

Thanh answered 8/10, 2020 at 5:38 Comment(1)

This worked for me: popperProps={{ strategy: 'fixed' }} – Wake 26/11, 2021 at 19:23

Another way to achieve this can be to give React datepicker the id of the div you want to attach the picker to. For example a div near the very top of your application:

<DatePicker
  portalId="root"
/>

Retain answered 21/2, 2022 at 15:19 Comment(3)

this will mess up the styling – Introduce 13/11, 2022 at 16:44

nice, easiest solution – Antihistamine 11/4, 2023 at 12:30

this just causes it to break onClick for me. or rather when you select a value – Cynarra 14/7, 2023 at 13:49

Maybe the problem is solved, but I'm using TailwindCSS, and using this, the problem continues.

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

Adding to the parent the classname overflow-visible it works.

Hearten answered 15/2, 2023 at 11:41 Comment(0)

Recommended topics

Hot tags