React-datepicker: Datepicker behavior inside container with overflow: scroll

[willbuckingham]

Had a problem somewhere between 0.47 and 0.52 that I believe might have been caused by the transition to tether.

Our datepicker was in a container that was overflow:scroll, and in the old incarnation (0.47) it was fine because the calendar widget part got appended to body, but now it stays with the input dialog inside the container and was subsequently affected by the overflow (which makes sense from a CSS point of view, but not as useful for the calendar to go over the top).

Now I can probably remove the overflow scroll as this may be intended behavior (but for people who cannot remove this, but would still like the old behavior), or perhaps I can change some options from: https://hacker0x01.github.io/react-datepicker/#example-20 to affect a better solution.

Or perhaps

Thanks,

[pmacmillan]

I think I have the same issue.

It happens because if the popper element is rendered inside the scrollable container, then it -- by design -- scrolls inside the container.

I've quickly hacked together this as a solution using react-overlays: pmacmillan/react-datepicker@9df6c1cadb3b50af37c273d575a2a7df0159d838

You use it like so:

<DatePicker ... popperContainer={containerElementOutsideOfScrollableDiv} ...></div>

where containerElementOutsideOfScrollableDiv is anything accepted by https://github.com/react-bootstrap/react-overlays Portal element (I temporarily added a div at the root of my document and grabbed a reference with getElementById).

Just threw this together right now, so I'm not sure if this is the best (or event a good) approach, however it does fix the issue for me (and I already use react-bootstrap for other things, so...)

[pmacmillan]

I think the correct solution here is to allow the caller to pass a "popperWrapperComponent" or something (still playing with the name)... In other words, let the caller wrap the calendar popover in a container (in my case, a component that uses renderIntoSubtree).

I'll try to have a PR ready sometime tomorrow

[bcullman]

@pmacmillan - is this still on your radar?

[pmacmillan]

@bcullman thanks for the ping. The branch I created at the end of August works but I was too lazy to create a fiddle to demo it and so it fell off my radar ;)

Here's a demo of my fix in action: https://codesandbox.io/s/1ozy5ol5vl

Now that React 16 is out, the react-overlay Portal component could be replaced with React.createPortal.

pr #1074

[pmacmillan]

I should note that in my demo link, I forgot to create the actual container html so the document.getElementById returns null.

Suprisingly, this works and Portal will just drop in the element at the bottom of the BODY. So, it's missing in the demo url but works anyway because magic. lol.

I also added some test coverage to let the build pass, but I'm wary about writing green-to-green tests.

Feel free to ping me if anything else is needed.

[bcullman]

fyi, we are using react-bootstrap for a lot of our UX, and they are still not ready for react v16, so dropping react-overlay Portal for React.createPortal at this time would be very hard to swallow.

[pmacmillan]

I'm pretty much in the same place (using react-bootstrap in a production app), which is why I like the approach of: just give me something to wrap the calendar in and that wrapper can take care of whatever approach you want ;).

[pmacmillan]

Oh, and in case it isn't clear, the "Portal" example actually uses renderSubtreeIntoContainer (which is the same as react-bootstrap).

[bcullman]

Can we release a 0.56 for this fix?