Get rid of the null reminder to fix jumping inputs when updating reminders

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..."
+			/>
-			>
+			<a @click="removeReminderByIndex(index)" v-if="!disabled">
-			</flat-pickr>
-			<a @click="removeReminderByIndex(index)" v-if="index !== (reminders.length - 1) && !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)
+			// No date selected
-			this.reminders[index] = newDate
+			if (isNaN(newDate)) {
+				return
+			}
 
-			let lastIndex = this.reminders.length - 1
+			const index = parseInt(instance.input.dataset.index)
-			// put a new null at the end if we changed something
+			if (isNaN(index)) {
-			if (lastIndex === index && !isNaN(newDate)) {
+				this.reminders.push(newDate)
-				this.reminders.push(null)
+				// 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()

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

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.
+			this.activeFields.reminders = this.task.reminderDates.length > 0
-			// 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.repeatAfter = this.task.repeatAfter.amount > 0
 			this.activeFields.labels = this.task.labels.length > 0
 			this.activeFields.attachments = this.task.attachments.length > 0