From 434c0daa239dc6d502f55be39783edd75c96703e Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 15:24:45 +0100 Subject: [PATCH] fix(datepicker): partial focusout and click fix --- frontend/src/utils/form/datepicker.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index d0f6123b2..c9cba1a8b 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -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 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 => { - const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget); - const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); - if (targetIsOutside && targetIsNotTimepicker) + const hasFocus = event.relatedTarget !== null; + const focussedIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); + const focussedIsNotElement = event.relatedTarget !== this._element; + if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement) 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 targetIsOutside = !this.datepickerInstance.dt.contains(event.target) + && event.target !== this.datepickerInstance.dt; const targetIsInDocument = window.document.contains(event.target); - const targetIsNotInput = event.target !== this._element; - if (targetIsOutside && targetIsInDocument && targetIsNotInput) + const targetIsNotElement = event.target !== this._element; + if (targetIsOutside && targetIsInDocument && targetIsNotElement) this.datepickerInstance.close(); });