Showing overflow of a static Flatpicker in a scrollable grid column parent

Question

I used a grid display on the body with some control elements in column 1, and a fullpage view in the second column. The first column may contain a lot of elements and requires vertical scroll (overflow-x:auto).

I have an input element within the other elements in the grid column to which I assign flatpicker.

https://codepen.io/dbauszus-glx/pen/wvpamZr

flatpickr("#date-input", {
  static: true,
  //appendTo: "scroll-parent"
});

My issue is that without the static property the flatpickr control displays but doesn't scroll.

With the static property the flatpickr control scrolls together with the input element but the display overflows the parent container with scroll.

I'd like the control to show as seen without static but be linked to the input element when scrolled.

I tried to work with the appendTo property which doesn't seem to have any effect.

Answer 1

Trawling the flatpickr issues I found an issue related to the positioning of the flatpickr instance inside a scrollparent.

I put together a small util method which takes the flatpickr instance and a scrollParent element and attached a scroll event listener to the parent when the flatpickr instance opens.

The scroll event method will reposition the absolute flatpickr container.

The onClose event will remove the scroll eventlistener from the scrollParent element.

function appendFlatpickrToScroll(fp, scrollParent) {
  fp.config.onOpen.push(() => {
    scrollParent.addEventListener("scroll", scrollEvent, { passive: true });
  });

  fp.config.onClose.push(() => {
    scrollParent.removeEventListener("scroll", scrollEvent);
  });

  function scrollEvent() {
    fp._positionCalendar();
  }
}