From 3f9ca5e230f0d8b5f83b5fc35c18fca6afcae6f7 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 13 Nov 2019 17:25:56 +0100 Subject: [PATCH] fix(datepicker): close datepickers on focus loss --- frontend/src/utils/form/datepicker.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index b8ba0869f..c6e6ff589 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -180,11 +180,11 @@ 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 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) this.datepickerInstance.close(); - } }); // close the datepicker on escape keydown events