fix(datepicker): manually add scroll offset based on scroll target

frontend/src/utils/form/datepicker.js

@@ -2,6 +2,8 @@ import datetime from 'tail.datetime';
 import { Utility } from '../../core/utility';
 import moment from 'moment';
 
+const DP_SCROLL_TARGET_CLASS = 'datepicker--scroll-target';
+
 const KEYCODE_ESCAPE = 27;
 const Z_INDEX_MODAL = 9999;
 
@@ -43,9 +45,6 @@ const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
 
 const DATEPICKER_CONFIG = {
   'global': {
-    // minimize overlaps with other date inputs
-    position: 'right',
-
     // set default time to 00:00:00
     timeHours: 0,
     timeMinutes: 0,
@@ -135,11 +134,9 @@ export class Datepicker {
     // insert the datepicker element (dt) after the form
     this._element.form.parentNode.insertBefore(this.datepickerInstance.dt, this._element.form.nextSibling);
 
-    // if the input element is in any open modal, increase the z-index of the datepicker and set its position to fixed to avoid repositioning on page scroll
+    // if the input element is in any open modal, increase the z-index of the datepicker
-    // FIXME: instead of setting the position to fixed, use absolute and reposition (decrease left)
     if (this._element.closest('.modal--open')) {
       this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL;
-      this.datepickerInstance.dt.style.position = 'fixed';
     }
 
     // register this datepicker instance with the formID of the given element in the datepicker collection
@@ -190,6 +187,15 @@ export class Datepicker {
 
     // format the date value of the form input element of this datepicker before form submission
     this._element.form.addEventListener('submit', () => this.formatElementValue());
+
+    // manually reposition the datepicker element on scroll change of its next scroll target
+    const scrollTargetNode = this.datepickerInstance.dt.closest(DP_SCROLL_TARGET_CLASS);
+    if (scrollTargetNode) {
+      scrollTargetNode.addEventListener('scroll', () => {
+        this.datepickerInstance.dt.style.scrollLeft = `${scrollTargetNode.scrollLeft}px`;
+        this.datepickerInstance.dt.style.scrollTop  = `${scrollTargetNode.scrollTop }px`;
+      });
+    }
   }
 
   destroy() {

frontend/src/utils/modal/modal.js

@@ -23,6 +23,8 @@ const MODALS_WRAPPER_CLASS = 'modals-wrapper';
 const MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
 const MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
 
+const DP_SCROLL_TARGET_CLASS = 'datepicker--scroll-target';
+
 @Utility({
   selector: '[uw-modal]',
 })
@@ -128,7 +130,7 @@ export class Modal {
   }
 
   _open() {
-    this._element.classList.add(MODAL_OPEN_CLASS);
+    this._element.classList.add(MODAL_OPEN_CLASS, DP_SCROLL_TARGET_CLASS);
     this._modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
     this._modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
     this._modalsWrapper.appendChild(this._element);

src/Handler/Exam/Form.hs

@@ -163,8 +163,8 @@ examOccurrenceForm prev = wFormToAForm $ do
       (eofNameRes, eofNameView) <- mpreq (textField & cfStrip & cfCI) ("" & addName (nudge "name")) (eofName <$> mPrev)
       (eofRoomRes, eofRoomView) <- mpreq (textField & cfStrip) ("" & addName (nudge "room")) (eofRoom <$> mPrev)
       (eofCapacityRes, eofCapacityView) <- mpreq (natFieldI MsgExamRoomCapacityNegative) ("" & addName (nudge "capacity")) (eofCapacity <$> mPrev)
-      (eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start") & addDatepickerPositionAttr DPBottom) (eofStart <$> mPrev)
+      (eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start")) (eofStart <$> mPrev)
-      (eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end") & addDatepickerPositionAttr DPBottom) (eofEnd <$> mPrev)
+      (eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end")) (eofEnd <$> mPrev)
       (eofDescRes, eofDescView) <- mopt htmlFieldSmall ("" & addName (nudge "description")) (eofDescription <$> mPrev)
 
       return ( ExamOccurrenceForm

templates/default-layout.hamlet

@@ -11,7 +11,7 @@ $if not isModal
 
 <div .main>
 
-  <div .main__content uw-poc>
+  <div .main__content uw-poc .datepicker--scroll-target>
 
     $if not isModal
       <!-- breadcrumbs -->