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
This prop is not documented as of this writing but you can use
popperPropsto configure the popper properties - they use Popper.js. In your case usepositionFixed: trueso that it would be relative to the initial containing block of the viewport (i.e.,<html>)https://github.com/Hacker0x01/react-datepicker/blob/master/src/popper_component.jsx