React-dates: appendToBody: calendar position is wrong, when scroll body.

[LeeHao12]

react-dates version
[email protected]

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]

Facing the same issue here. Any solution for this one?

[LeeHao12]

No yet.
Because Calendar DOM use transform.
So, Calendar position is wrong, when scroll body out of window. 😢

[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.

[korac]

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

[Olexiy665]

Hotfix 😅😅😅

// place this function at hook (and subscribe to visibility change) and to window resize callBack
// datePickerOpenState focusedInput

const updateDatePickerPosition = datePickerOpenState => {
const dateRangePickerWrapper = document.getElementsByClassName(
"DateRangePicker_picker"
)[0];
// using setTimeout to use async stack and 'wait' while DateRangePicker_picker appending to the DOM
setTimeout(() => {
if (dateRangePickerWrapper) {
const transforms = dateRangePickerWrapper.style.transform;
// delete our previous translate();
const initialTransforms = transforms.replace(
/translate((-?\d+(?:.\d)?)px, (-?\d+(?:.\d)?)px)/g,
""
);
// add transforms according to window pageYOffset
dateRangePickerWrapper.style.transform = `${initialTransforms} translate(0, ${window.pageYOffset}px);

  if (datePickerOpenState) {
    // please add .DateRangePicker_picker {opacity: 0} at your CSS,
    // and change it only after transforms changed  to avoid calendar "jumping"
    dateRangePickerWrapper.style.opacity = "1";
  }
}

}, 1);
};`

[siilike]

The fix is to add window.scrollY to offsetY in getDetachedContainerStyles.