From 138b06752f8221c1ebae89e318ef36734662efbc Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 15 May 2022 22:17:26 +0200
Subject: [PATCH] fix: allow clicking on confirm for a date without requiring
 to click on another input field

---
 src/components/input/datepicker.vue | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index bc2c1815..729a39fb 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -115,7 +115,7 @@ import {defineComponent} from 'vue'
 
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
-import { i18n } from '@/i18n'
+import {i18n} from '@/i18n'
 
 import {format} from 'date-fns'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
@@ -185,7 +185,7 @@ export default defineComponent({
 				this.updateData()
 			},
 			get() {
-				if(!this.date) {
+				if (!this.date) {
 					return ''
 				}
 
@@ -195,7 +195,7 @@ export default defineComponent({
 	},
 	methods: {
 		setDateValue(newVal) {
-			if(newVal === null) {
+			if (newVal === null) {
 				this.date = null
 				return
 			}
@@ -207,7 +207,7 @@ export default defineComponent({
 			this.$emit('change', this.date)
 		},
 		toggleDatePopup() {
-			if(this.disabled) {
+			if (this.disabled) {
 				return
 			}
 
@@ -219,12 +219,16 @@ export default defineComponent({
 			}
 		},
 		close() {
-			this.show = false
-			this.$emit('close', this.changed)
-			if(this.changed) {
-				this.changed = false
-				this.$emit('close-on-change', this.changed)
-			}
+			// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
+			// having to click on another input field before it is actually used.
+			setTimeout(() => {
+				this.show = false
+				this.$emit('close', this.changed)
+				if (this.changed) {
+					this.changed = false
+					this.$emit('close-on-change', this.changed)
+				}
+			}, 200)
 		},
 		setDate(date) {
 			if (this.date === null) {
@@ -311,7 +315,7 @@ export default defineComponent({
 				text-align: center;
 			}
 		}
-			
+
 		a.button {
 			margin: 1rem;
 			width: calc(100% - 2rem);