FlatPickr Firefox quirks fixed (#8782)

* FlatPickr Firefox quirks fixed

* New line at the end of the file

frontend/src/app/modules/common/op-date-picker/datepicker.ts

@@ -35,7 +35,7 @@ import DateOption = flatpickr.Options.DateOption;
 export class DatePicker {
   private datepickerFormat = 'Y-m-d';
 
-  private datepickerCont:JQuery = jQuery(this.datepickerElemIdentifier);
+  private datepickerCont:HTMLElement = document.querySelector(this.datepickerElemIdentifier)! as HTMLElement;
   public datepickerInstance:Instance;
   private reshowTimeout:any;
 
@@ -112,29 +112,46 @@ export class DatePicker {
     return this.datepickerInstance.isOpen;
   }
 
-  private hideDuringScroll = () => {
-      this.datepickerInstance.close();
+  private hideDuringScroll = (event:Event) => {
+    // Prevent Firefox quirk: flatPicker emits
+    // multiple scrolls event when it is open
+    const target = event.target! as HTMLInputElement;
 
-      if (this.reshowTimeout) {
-        clearTimeout(this.reshowTimeout);
-      }
+    if (target.classList.contains('flatpickr-monthDropdown-months')) {
+      return;
+    }
+
+    this.datepickerInstance.close();
+
+    if (this.reshowTimeout) {
+      clearTimeout(this.reshowTimeout);
+    }
 
-      this.reshowTimeout = setTimeout(() => {
-        if (this.visibleAndActive()) {
-          this.datepickerInstance.open();
-        }
-      }, 50);
+    this.reshowTimeout = setTimeout(() => {
+      if (this.visibleAndActive()) {
+        this.datepickerInstance.open();
+      }
+    }, 50);
   }
 
   private visibleAndActive() {
-    const input = this.datepickerCont;
-
     try {
-      return document.elementFromPoint(input.offset()!.left, input.offset()!.top) === input[0] &&
-        document.activeElement === input[0];
+      return this.isInViewport(this.datepickerCont) &&
+        document.activeElement === this.datepickerCont;
     } catch (e) {
       console.error("Failed to test visibleAndActive " + e);
       return false;
     }
   }
+
+  private isInViewport(element:HTMLElement) {
+    const rect = element.getBoundingClientRect();
+
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
 }