fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(datepicker): close datepickers on focusout or click outside

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-14 12:24:02 +01:00
parent 3f9ca5e230
commit 7fa0124fe2
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/utils/form/datepicker.js
View File

@ -180,14 +180,27 @@ export class Datepicker {
// change the selected date in the tail.datetime instance if the value of the input element is changed
this._element.addEventListener('change', setDatepickerDate, { once: true });
// close the instance on focus loss of the corresponding input element
// (only close the instance if source and target IDs differ, since interactions with the opened datepicker also triggers this event in some cases)
this._element.addEventListener('focusout', event => {
if (!event.relatedTarget || event.relatedTarget.id !== event.srcElement.id)
// close the instance on focusout of any element if the target is outside of the instance
window.addEventListener('focusout', event => {
console.log('focusout', event);
const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget);
const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget);
console.log(targetIsOutside, targetIsNotTimepicker);
if (targetIsOutside && targetIsNotTimepicker)
this.datepickerInstance.close();
});
// close the instance on click on any element outside of the datepicker (except the input element itself)
window.addEventListener('click', event => {
const targetIsOutside = !this.datepickerInstance.dt.contains(event.target);
const targetIsInDocument = window.document.contains(event.target);
const targetIsNotInput = event.target !== this._element;
console.log(targetIsOutside, targetIsInDocument, targetIsNotInput);
if (targetIsOutside && targetIsInDocument && targetIsNotInput)
this.datepickerInstance.close();
});
// close the datepicker on escape keydown events
// close the instance on escape keydown events
this._element.addEventListener('keydown', event => {
if (event.keyCode === KEYCODE_ESCAPE) {
this.datepickerInstance.close();