fix: Add support for adding new entries with IME input

Duplicate code moved to `QuestionMixin.js`. The code changes in 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 <[email protected]> Signed-off-by: Christian Hartmann <[email protected]>
nextcloud · Jul 2, 2024 · c990813 · c990813
1 parent e019081
commit c990813
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 65 deletions.
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
@@ -78,10 +78,9 @@
 				<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
 					<input
 						ref="pseudoInput"
-						v-model="inputValue"
+						class="question__input"
 						:aria-label="t('forms', 'Add a new answer')"
 						:placeholder="t('forms', 'Add a new answer')"
-						class="question__input"
 						:maxlength="maxStringLengths.optionText"
 						minlength="1"
 						type="text"
@@ -112,7 +111,6 @@ import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
 import AnswerInput from './AnswerInput.vue'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
-import GenRandomId from '../../utils/GenRandomId.js'
 import logger from '../../utils/Logger.js'
 
 export default {
@@ -153,7 +151,7 @@ export default {
 
 		isLastEmpty() {
 			const value = this.options[this.options.length - 1]
-			return value?.text?.trim().length === 0
+			return value?.text?.trim?.().length === 0
 		},
 
 		isMultiple() {
@@ -239,39 +237,13 @@ export default {
 		 * @param {object} answer the answer to update
 		 */
 		updateAnswer(id, answer) {
-			const options = this.options.slice()
+			const options = [...this.options]
 			const answerIndex = options.findIndex((option) => option.id === id)
 			options[answerIndex] = answer
 
 			this.updateOptions(options)
 		},
 
-		/**
-		 * Add a new empty answer locally
-		 */
-		addNewEntry() {
-			// Add local entry
-			const options = this.options.slice()
-			options.push({
-				id: GenRandomId(),
-				questionId: this.id,
-				text: this.inputValue,
-				local: true,
-			})
-
-			this.inputValue = ''
-
-			// Update question
-			this.updateOptions(options)
-
-			this.$nextTick(() => {
-				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()
-			})
-		},
-
 		/**
 		 * Restore an option locally
 		 *

diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
@@ -205,7 +205,6 @@ import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 
 import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
-import GenRandomId from '../../utils/GenRandomId.js'
 import logger from '../../utils/Logger.js'
 import OptionInputDialog from '../OptionInputDialog.vue'
 
@@ -553,39 +552,6 @@ export default {
 			this.updateOptions(options)
 		},
 
-		/**
-		 * 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 = ''
-			}
-
-			// Update questions
-			this.updateOptions(options)
-
-			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()
-			})
-		},
-
 		/**
 		 * Restore an option locally
 		 *

diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
@@ -26,6 +26,7 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 
 import logger from '../utils/Logger.js'
+import GenRandomId from '../utils/GenRandomId.js'
 import OcsResponse2Data from '../utils/OcsResponse2Data.js'
 import Question from '../components/Questions/Question.vue'
 
@@ -409,5 +410,41 @@ export default {
 			})
 			this.isLoading = false
 		},
+
+		/**
+		 * Add a new empty answer locally
+		 * @param {InputEvent} event The input event that triggered adding a new entry
+		 */
+		addNewEntry({ target, isComposing }) {
+			// Needed for languages using IME like Japanese or Chinese
+			if (!isComposing && target.value !== '') {
+				// 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)
+
+				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()
+				})
+			}
+		},
 	},
 }