From da1d34789d063a0759de2fbdd4645c2d03475f82 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 24 Oct 2020 18:12:14 +0200
Subject: [PATCH] Get rid of the null reminder to fix jumping inputs when
 updating reminders

---
 src/components/tasks/partials/reminders.vue | 38 ++++++++++++++-------
 src/models/task.js                          |  1 -
 src/views/tasks/TaskDetailView.vue          |  5 +--
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 3c98b2f9f..d08208850 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -9,16 +9,20 @@
 				:config="flatPickerConfig"
 				:data-index="index"
 				:disabled="disabled"
-				:id="'taskreminderdate' + index"
-				:v-model="reminders"
 				:value="r"
-				placeholder="Add a new reminder..."
-			>
-			</flat-pickr>
-			<a @click="removeReminderByIndex(index)" v-if="index !== (reminders.length - 1) && !disabled">
+			/>
+			<a @click="removeReminderByIndex(index)" v-if="!disabled">
 				<icon icon="times"></icon>
 			</a>
 		</div>
+		<div class="reminder-input" v-if="showNewReminder">
+			<flat-pickr
+				:config="flatPickerConfig"
+				:disabled="disabled"
+				:value="null"
+				placeholder="Add a new reminder..."
+			/>
+		</div>
 	</div>
 </template>
 
@@ -33,6 +37,7 @@ export default {
 			reminders: [],
 			lastReminder: 0,
 			nowUnix: new Date(),
+			showNewReminder: true,
 			flatPickerConfig: {
 				altFormat: 'j M Y H:i',
 				altInput: true,
@@ -72,20 +77,27 @@ export default {
 			this.lastReminder = +new Date(selectedDates[0])
 		},
 		addReminderDate(selectedDates, dateStr, instance) {
-			let newDate = +new Date(selectedDates[0])
+			const newDate = +new Date(selectedDates[0])
 
 			// Don't update if nothing changed
 			if (newDate === this.lastReminder) {
 				return
 			}
 
-			let index = parseInt(instance.input.dataset.index)
-			this.reminders[index] = newDate
+			// No date selected
+			if (isNaN(newDate)) {
+				return
+			}
 
-			let lastIndex = this.reminders.length - 1
-			// put a new null at the end if we changed something
-			if (lastIndex === index && !isNaN(newDate)) {
-				this.reminders.push(null)
+			const index = parseInt(instance.input.dataset.index)
+			if (isNaN(index)) {
+				this.reminders.push(newDate)
+				// This is a workaround to recreate the flatpicker instance which essentially resets it.
+				// Even though flatpickr itself has a reset event, the Vue component does not expose it.
+				this.showNewReminder = false
+				this.$nextTick(() => this.showNewReminder = true)
+			} else {
+				this.reminders[index] = newDate
 			}
 
 			this.updateData()
diff --git a/src/models/task.js b/src/models/task.js
index c8a07d197..9f0369377 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -27,7 +27,6 @@ export default class TaskModel extends AbstractModel {
 					this.scheduleNotification(d)
 					return d
 				})
-				this.reminderDates.push(null) // To trigger the datepicker
 			})
 
 		// Parse the repeat after into something usable
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 14e22c395..9d30953c6 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -527,10 +527,7 @@ export default {
 			this.activeFields.percentDone = this.task.percentDone > 0
 			this.activeFields.startDate = this.task.startDate !== null
 			this.activeFields.endDate = this.task.endDate !== null
-			// On chrome, reminderDates.length holds the actual number of reminders that are not null.
-			// Unlike on desktop where it holds all reminders, including the ones which are null.
-			// This causes the reminders to dissapear entierly when only one is set and the user is on mobile.
-			this.activeFields.reminders = this.task.reminderDates.length > 1 || (window.innerWidth < 769 && this.task.reminderDates.length > 0)
+			this.activeFields.reminders = this.task.reminderDates.length > 0
 			this.activeFields.repeatAfter = this.task.repeatAfter.amount > 0
 			this.activeFields.labels = this.task.labels.length > 0
 			this.activeFields.attachments = this.task.attachments.length > 0