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(); });