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