FlatPickr Firefox quirks fixed (#8782)

* FlatPickr Firefox quirks fixed

* New line at the end of the file
pull/8807/head
Aleix Suau 4 years ago committed by GitHub
parent e03161b5e3
commit 21d4c8dd15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 47
      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)
);
}
}

Loading…
Cancel
Save