React-datepicker: problem with using react-modal

[blueshw]

There is a problem using react-modal after version 0.49.0.
Calendar component is expected to place above all of any components, but it is placed into modal like this image.

[anthonyLukes]

I have the same issue. https://codesandbox.io/s/pkx0qwzlm7 My guess is that this is a limitation from using popper.js vs. Tether.

[skvale]

I forked that and added

~overflow: show;~

overflow: visible;

to the modal
https://codesandbox.io/s/pylqqj0y27

[wonskarol]

It's not exactly related to overflow: hidden.
I ran into similar issue as @blueshw with my custom modal.
I build a PoC: https://codepen.io/anon/pen/rpNeVW?editors=1111
If you add position: relative it breaks.

It would be nice if popper.js could provide something similar to Tether: attach popper into body.

[blueshw]

@skvale
thank you for your answer.
but, can overflow property set value of show?
is it better?

overflow: initial;

it also works well.

[skvale]

@blueshw Yeah show is not a valid option for overflow
visible is what I was looking for. Using initial and visible are the same, the initial value of overflow is visible

[ArcanisCz]

Had similar problem, and according to PR https://github.com/Hacker0x01/react-datepicker/pull/1074 i was able to "fix" datepicker in modals and scroll containers

const CalendarContainer = ({children}) => children ? (
    createPortal(React.cloneElement(children, {
        className: "YOUR_DATEPICKER_CSS_CLASS_HERE react-datepicker-popper"
    }), document.body)
) : null;
....

<DatePicker 
  ...
  popperContainer: CalendarContainer,
/>

You need to set proper classname (according to where you have imported react-datepicper styles) instead of YOUR_DATEPICKER_CSS_CLASS_HERE and set its z-index to some big value (bigger than modals have in your app)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[elebumm]

Thank you @ArcanisCz for your solution. Almost pulled my hair out with this.

I just had to apply a z-index to the popper-container and it works flawlessly.