appendToBody: calendar position is wrong, when scroll body.

react-dates version react-dates@20.1.0

Describe the bug Calendar position is wrong, when scroll body.

Source code

export default function getDetachedContainerStyles(openDirection, anchorDirection, referenceEl) {
  const referenceRect = referenceEl.getBoundingClientRect();
  let offsetX = referenceRect.left;
  let offsetY = referenceRect.top;

  if (openDirection === OPEN_UP) {
    offsetY = -(window.innerHeight - referenceRect.bottom);
  }

  if (anchorDirection === ANCHOR_RIGHT) {
    offsetX = -(window.innerWidth - referenceRect.right);
  }

  return {
    transform: `translate3d(${Math.round(offsetX)}px, ${Math.round(offsetY)}px, 0)`,
  };
}

picture

modify DOM make body scroll calendar position is wrong

[korac]

We gave up on react-dates in favor of react-datepicker (uses popper for its positioning).

[mattaningram]

I’m having a similar issue. We offset the top position of the body element when opening a modal to freeze the page in place, but this means any datepicker with appendToBody set is unaware of the body offset and is positioned incorrectly if you have scrolled at all before opening the modal.

If you set the appended datepicker to position: fixed it actually works properly even if the page has been scrolled before opening the modal, but this has to be done in JS because react-dates doesn’t let us add a custom class to the generated elements.

Not only that, I tried to set disableScroll to false, and it still forces overflow-y: hidden to the page, so that attribute appears to not work?

Very frustrating all around.