Merge pull request #5483 from nextcloud/backport/5458/stable28

src/components/card/CardSidebarTabDetails.vue

@@ -37,7 +37,8 @@
 
 		<DueDateSelector :card="card"
 			:can-edit="canEdit"
-			@change="updateCardDue" />
+			@change="updateCardDue"
+			@input="debouncedUpdateCardDue" />
 
 		<div v-if="projectsEnabled" class="section-wrapper">
 			<CollectionList v-if="card.id"
@@ -68,6 +69,7 @@ import Description from './Description.vue'
 import TagSelector from './TagSelector.vue'
 import AssignmentSelector from './AssignmentSelector.vue'
 import DueDateSelector from './DueDateSelector.vue'
+import { debounce } from 'lodash'
 
 export default {
 	name: 'CardSidebarTabDetails',
@@ -162,6 +164,10 @@ export default {
 			})
 		},
 
+		debouncedUpdateCardDue: debounce(function(val) {
+			this.updateCardDue(val)
+		}, 500),
+
 		addLabelToCard(newLabel) {
 			this.copiedCard.labels.push(newLabel)
 			const data = {

src/components/card/DueDateSelector.vue

@@ -156,7 +156,7 @@ export default defineComponent({
 				return this.card?.duedate ? new Date(this.card.duedate) : null
 			},
 			set(val) {
-				this.$emit('change', val ? new Date(val) : null)
+				this.$emit('input', val ? new Date(val) : null)
 			},
 		},
 
@@ -216,9 +216,12 @@ export default defineComponent({
 		},
 		removeDue() {
 			this.duedate = null
+			this.$emit('change', null)
+
 		},
 		selectShortcut(shortcut) {
 			this.duedate = shortcut.timestamp
+			this.$emit('change', shortcut.timestamp)
 		},
 		getTimestamp(momentObject) {
 			return momentObject?.minute(0).second(0).millisecond(0).toDate() || null

src/views/CreateNewCardCustomPicker.vue

@@ -64,7 +64,10 @@
 				@select="onSelectUser"
 				@remove="onRemoveUser" />
 
-			<DueDateSelector :card="card" :can-edit="!loading && !!selectedBoard" @change="updateCardDue" />
+			<DueDateSelector :card="card"
+				:can-edit="!loading && !!selectedBoard"
+				@change="updateCardDue"
+				@input="updateCardDue" />
 
 			<Description :key="card.id"
 				:card="card"