feat: 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 1, 2024 · 6a78935 · 6a78935
1 parent 4ede6cf
commit 6a78935
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 61 deletions.
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
@@ -112,7 +112,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 {
@@ -246,32 +245,6 @@ export default {
 			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) {
+				// 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()
+				})
+			}
+		},
 	},
 }