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

fix(datepicker): partial focusout and click fix

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-14 15:24:45 +01:00
parent 999dd6b29b
commit 434c0daa23
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -180,20 +180,22 @@ export class Datepicker {
// change the selected date in the tail.datetime instance if the value of the input element is changed // 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 }); this._element.addEventListener('change', setDatepickerDate, { once: true });
// close the instance on focusout of any element if the target is outside of the instance // close the instance on focusout of any element if another input is focussed that is neither the timepicker nor _element
window.addEventListener('focusout', event => { window.addEventListener('focusout', event => {
const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget); const hasFocus = event.relatedTarget !== null;
const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); const focussedIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget);
if (targetIsOutside && targetIsNotTimepicker) const focussedIsNotElement = event.relatedTarget !== this._element;
if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement)
this.datepickerInstance.close(); this.datepickerInstance.close();
}); });
// close the instance on click on any element outside of the datepicker (except the input element itself) // close the instance on click on any element outside of the datepicker (except the input element itself)
window.addEventListener('click', event => { window.addEventListener('click', event => {
const targetIsOutside = !this.datepickerInstance.dt.contains(event.target); const targetIsOutside = !this.datepickerInstance.dt.contains(event.target)
&& event.target !== this.datepickerInstance.dt;
const targetIsInDocument = window.document.contains(event.target); const targetIsInDocument = window.document.contains(event.target);
const targetIsNotInput = event.target !== this._element; const targetIsNotElement = event.target !== this._element;
if (targetIsOutside && targetIsInDocument && targetIsNotInput) if (targetIsOutside && targetIsInDocument && targetIsNotElement)
this.datepickerInstance.close(); this.datepickerInstance.close();
}); });