From b3caece2560aa9e8d5461bfd6fa584ebf98c6ff3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Mar 2024 18:03:49 +0100
Subject: [PATCH] fix(datepicker): emit date value changes as soon as they
 happen

Flatpickr only returns a change event when the value in the input it's referring to changes. That means it will usually only trigger when the focus is moved out of the input field. This is fine most of the time. However, since we're displaying flatpickr in a popup, the whole html dom instance might get destroyed, before the change event had a chance to fire. In that case, it would not update the date value. To fix this, we're now listening on every change and bubble them up as soon as they happen.

Resolves https://community.vikunja.io/t/due-date-confirm-button-not-working/2104
---
 .../src/components/input/datepickerInline.vue | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/input/datepickerInline.vue b/frontend/src/components/input/datepickerInline.vue
index b8a7a7d5b..eca16d99d 100644
--- a/frontend/src/components/input/datepickerInline.vue
+++ b/frontend/src/components/input/datepickerInline.vue
@@ -63,6 +63,7 @@
 
 	<div class="flatpickr-container">
 		<flat-pickr
+			ref="flatPickrRef"
 			v-model="flatPickrDate"
 			:config="flatPickerConfig"
 		/>
@@ -70,7 +71,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, toRef, watch, computed, type PropType} from 'vue'
+import {computed, onBeforeUnmount, onMounted, type PropType, ref, toRef, watch} from 'vue'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
@@ -81,7 +82,7 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {useI18n} from 'vue-i18n'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 
 const props = defineProps({
 	modelValue: {
@@ -105,6 +106,7 @@ watch(
 	{immediate: true},
 )
 
+const flatPickrRef = ref<HTMLElement | null>(null)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -142,6 +144,41 @@ const flatPickrDate = computed({
 	},
 })
 
+onMounted(() => {
+	const inputs = flatPickrRef.value?.$el.parentNode.querySelectorAll('.numInputWrapper > input.numInput')
+	inputs.forEach(i => {
+		i.addEventListener('input', handleFlatpickrInput)
+	})
+})
+
+onBeforeUnmount(() => {
+	const inputs = flatPickrRef.value?.$el.parentNode.querySelectorAll('.numInputWrapper > input.numInput')
+	inputs.forEach(i => {
+		i.removeEventListener('input', handleFlatpickrInput)
+	})
+})
+
+// Flatpickr only returns a change event when the value in the input it's referring to changes.
+// That means it will usually only trigger when the focus is moved out of the input field.
+// This is fine most of the time. However, since we're displaying flatpickr in a popup,
+// the whole html dom instance might get destroyed, before the change event had a
+// chance to fire. In that case, it would not update the date value. To fix 
+// this, we're now listening on every change and bubble them up as soon
+// as they happen.
+function handleFlatpickrInput(e) {
+	const newDate = new Date(date?.value || 'now')
+	if (e.target.classList.contains('flatpickr-minute')) {
+		newDate.setMinutes(e.target.value)
+	}
+	if (e.target.classList.contains('flatpickr-hour')) {
+		newDate.setHours(e.target.value)
+	}
+	if (e.target.classList.contains('cur-year')) {
+		newDate.setFullYear(e.target.value)
+	}
+	flatPickrDate.value = newDate
+}
+
 
 function setDateValue(dateString: string | Date | null) {
 	if (dateString === null) {