From 0aa738a678102663f8bd240f22542e06fad3179e Mon Sep 17 00:00:00 2001
From: Chartman123 <chris-hartmann@gmx.de>
Date: Mon, 1 Jul 2024 08:03:52 +0000
Subject: [PATCH] feat: Add support for adding new entries with IME input

The code changes in `QuestionMultiple.vue` allow for adding new entries with IME input, specifically for languages like Japanese or Chinese. This improvement ensures a better user experience when using IME input methods.

Signed-off-by: GitHub <noreply@github.com>
---
 src/components/Questions/QuestionMultiple.vue | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 9c21cb4a1c..eb590cc964 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -557,33 +557,36 @@ export default {
 		 * Add a new empty answer locally
 		 * @param {InputEvent} event The input event that triggered adding a new entry
 		 */
-		addNewEntry({ target }) {
-			// Add local entry
-			const options = [
-				...this.options,
-				{
-					id: GenRandomId(),
-					questionId: this.id,
-					text: target?.value ?? '',
-					local: true,
-				},
-			]
-
-			// Reset the "new answer" input if needed
-			if (this.$refs.pseudoInput) {
-				this.$refs.pseudoInput.value = ''
-			}
+		addNewEntry({ target, isComposing }) {
+			// Needed for languages using IME like Japanese or Chinese
+			if (!isComposing) {
+				// Add local entry
+				const options = [
+					...this.options,
+					{
+						id: GenRandomId(),
+						questionId: this.id,
+						text: target?.value ?? '',
+						local: true,
+					},
+				]
+
+				// Reset the "new answer" input if needed
+				if (this.$refs.pseudoInput) {
+					this.$refs.pseudoInput.value = ''
+				}
 
-			// Update questions
-			this.updateOptions(options)
+				// Update questions
+				this.updateOptions(options)
 
-			this.$nextTick(() => {
-				// Set focus to the created input element
-				this.focusIndex(options.length - 1)
+				this.$nextTick(() => {
+					// Set focus to the created input element
+					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()
-			})
+					// Trigger onInput on new AnswerInput for posting the new option to the API
+					this.$refs.input[options.length - 1].onInput()
+				})
+			}
 		},
 
 		/**