From 0b20b80654857cd77c91f8efa77805a4d508551f Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Fri, 14 Feb 2025 12:10:03 +0100
Subject: [PATCH] Fix: Implement debounced input handling for AnswerInput
 component

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/components/Questions/AnswerInput.vue | 29 ++++++++++++------------
 src/mixins/QuestionMixin.js              |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index ef87066a9..8273f7f5f 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -20,7 +20,7 @@
 			minlength="1"
 			type="text"
 			dir="auto"
-			@input="onInput"
+			@input="debounceOnInput"
 			@keydown.delete="deleteEntry"
 			@keydown.enter.prevent="focusNextInput" />
 
@@ -93,12 +93,8 @@ export default {
 
 	data() {
 		return {
-			queue: new PQueue({ concurrency: 1 }),
-
-			// As data instead of Method, to have a separate debounce per AnswerInput
-			debounceUpdateAnswer: pDebounce(function (answer) {
-				return this.queue.add(() => this.updateAnswer(answer))
-			}, 500),
+			queue: null,
+			debounceOnInput: null,
 		}
 	},
 
@@ -108,6 +104,15 @@ export default {
 		},
 	},
 
+	created() {
+		this.queue = new PQueue({ concurrency: 1 })
+
+		// As data instead of method, to have a separate debounce per AnswerInput
+		this.debounceOnInput = pDebounce(() => {
+			return this.queue.add(() => this.onInput())
+		}, 500)
+	},
+
 	methods: {
 		handleTabbing() {
 			this.$emit('tabbed-out')
@@ -130,16 +135,15 @@ export default {
 
 			if (this.answer.local) {
 				// Dispatched for creation. Marked as synced
-				// eslint-disable-next-line vue/no-mutating-props
-				this.answer.local = false
-				const newAnswer = await this.debounceCreateAnswer(answer)
+				this.$set(this.answer, 'local', false)
+				const newAnswer = await this.createAnswer(answer)
 
 				// Forward changes, but use current answer.text to avoid erasing
 				// any in-between changes while creating the answer
 				newAnswer.text = this.$refs.input.value
 				this.$emit('update:answer', answer.id, newAnswer)
 			} else {
-				this.debounceUpdateAnswer(answer)
+				await this.updateAnswer(answer)
 				this.$emit('update:answer', answer.id, answer)
 			}
 		},
@@ -200,9 +204,6 @@ export default {
 
 			return answer
 		},
-		debounceCreateAnswer: pDebounce(function (answer) {
-			return this.queue.add(() => this.createAnswer(answer))
-		}, 100),
 
 		/**
 		 * Save to the server, only do it after 500ms
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index cc26ade39..49d2b210d 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -451,7 +451,7 @@ export default {
 					this.focusIndex(options.length - 1)
 
 					// Trigger onInput on new AnswerInput for posting the new option to the API
-					this.$refs.input[options.length - 1].onInput()
+					this.$refs.input[options.length - 1].debounceOnInput()
 				})
 			}
 		},