diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index b8ba0869f..2c3ad9f61 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -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 if something other than the instance was clicked (i.e. if the target is not within the datepicker instance and if any previously clicked calendar view was replaced (is not in the window anymore) because it was clicked). YES, I KNOW - window.addEventListener('click', event => { - if (!this.datepickerInstance.dt.contains(event.target) && window.document.contains(event.target)) { + // 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 hasFocus = event.relatedTarget !== null; + const focussedIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); + const focussedIsNotElement = event.relatedTarget !== this._element; + const focussedIsInDocument = window.document.contains(event.relatedTarget); + if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement && focussedIsInDocument) + 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) + && event.target !== this.datepickerInstance.dt; + const targetIsInDocument = window.document.contains(event.target); + const targetIsNotElement = event.target !== this._element; + if (targetIsOutside && targetIsInDocument && targetIsNotElement) 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(); diff --git a/templates/i18n/info-lecturer/en-eu.hamlet b/templates/i18n/info-lecturer/en-eu.hamlet index dfaffdb6a..72221d0f1 100644 --- a/templates/i18n/info-lecturer/en-eu.hamlet +++ b/templates/i18n/info-lecturer/en-eu.hamlet @@ -33,7 +33,7 @@ $newline text The course description can be composed in Html and should contain the module description! -
Unterstützung für verschiedene Institute +
Support for Multiple Departments

^{newU2WFeat} Uni2work supports managing multiple departments; prefixing course titles with e.g. "[MATH]" are not necessary anymore. diff --git a/templates/i18n/info-lecturer/en.hamlet b/templates/i18n/info-lecturer/en.hamlet index 5a6afc414..3ed3b9d02 100644 --- a/templates/i18n/info-lecturer/en.hamlet +++ b/templates/i18n/info-lecturer/en.hamlet @@ -33,7 +33,7 @@ $newline text The course description can be composed in Html and should contain the module description! -

Unterstützung für verschiedene Institute +
Support for Multiple Departments

^{newU2WFeat} Uni2work supports managing multiple departments; prefixing course titles with e.g. "[MATH]" are not necessary anymore.