fix(due-date): automatically open native date picker when choosing a due date

src/components/card/DueDateSelector.vue

@@ -154,9 +154,19 @@
 				stringify: this.stringify,
 				parse: this.parse,
 			},
+			// Set while waiting for the due date to be persisted so the picker can be opened once it appears
+			openPickerOnceSet: false,
 		}
 	},
+	watch: {
+		duedate(newVal) {
+			if (newVal && this.openPickerOnceSet) {
+				this.openPickerOnceSet = false
+				this.$nextTick(() => this.openDatePicker())
+			}
+		},
+	},
 	computed: {
 		duedate: {
 			get() {
 				return this.card?.duedate ? new Date(this.card.duedate) : null
@@ -221,9 +231,20 @@
 				now.setHours(8)
 				now.setMinutes(0)
 				now.setMilliseconds(0)
+				// The picker is only rendered once the due date has been persisted and passed back down via props
+				this.openPickerOnceSet = true
 				this.duedate = now
 			}
 		},
+		openDatePicker() {
+			const input = document.getElementById('card-duedate-picker')
+			// showPicker is not supported by all browsers, fall back to focusing the input
+			if (input?.showPicker) {
+				input.showPicker()
+			} else {
+				input?.focus()
+			}
+		},
 		removeDue() {
 			this.duedate = null