fix: Make sure "other" answer is set correctly so it will be saved in…

… LocalStorage

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

src/components/Questions/QuestionMultiple.vue

@@ -52,7 +52,7 @@
 				</NcCheckboxRadioSwitch>
 				<div v-if="allowOtherAnswer" class="question__other-answer">
 					<NcCheckboxRadioSwitch :checked="questionValues"
-						:value="valueOtherAnswer"
+						:value="otherAnswer ?? QUESTION_EXTRASETTINGS_OTHER_PREFIX"
 						:name="`${id}-answer`"
 						:type="isUnique ? 'radio' : 'checkbox'"
 						:required="checkRequired('other-answer')"
@@ -61,10 +61,11 @@
 						@keydown.enter.exact.prevent="onKeydownEnter">
 						{{ t('forms', 'Other:') }}
 					</NcCheckboxRadioSwitch>
-					<NcInputField :label="placeholderOtherAnswer"
-						:required="hasRequiredOtherAnswerInput"
-						:value.sync="inputOtherAnswer"
-						class="question__input" />
+					<NcInputField class="question__input"
+						:label="placeholderOtherAnswer"
+						:required="otherAnswer !== undefined"
+						:value="otherAnswerText"
+						@update:value="onChangeOther" />
 				</div>
 			</fieldset>
 		</template>
@@ -96,7 +97,6 @@
 				<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
 					<div :is="pseudoIcon" class="question__item__pseudoInput" />
 					<input ref="pseudoInput"
-						v-model="inputValue"
 						:aria-label="t('forms', 'Add a new answer')"
 						:placeholder="t('forms', 'Add a new answer')"
 						class="question__input"
@@ -126,6 +126,8 @@ import QuestionMixin from '../../mixins/QuestionMixin.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 import logger from '../../utils/Logger.js'
 
+const QUESTION_EXTRASETTINGS_OTHER_PREFIX = 'system-other-answer:'
+
 export default {
 	name: 'QuestionMultiple',
 
@@ -142,9 +144,7 @@ export default {
 
 	data() {
 		return {
-			inputOtherAnswer: this.valueToInputOtherAnswer(),
-			QUESTION_EXTRASETTINGS_OTHER_PREFIX: 'system-other-answer:',
-			inputValue: '',
+			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 		}
 	},
 
@@ -197,29 +197,21 @@ export default {
 			return this.extraSettings?.allowOtherAnswer
 		},
 
-		valueOtherAnswer() {
-			return this.QUESTION_EXTRASETTINGS_OTHER_PREFIX + this.inputOtherAnswer
-		},
-
-		hasRequiredOtherAnswerInput() {
-			const checkedOtherAnswer = this.values.filter(item => item.startsWith(this.QUESTION_EXTRASETTINGS_OTHER_PREFIX))
-			return checkedOtherAnswer[0] !== undefined
-		},
-	},
-
-	watch: {
-		inputOtherAnswer() {
-			if (this.isUnique) {
-				this.onChange(this.valueOtherAnswer)
-				return
-			}
-
-			const values = this.values.filter(item => !item.startsWith(this.QUESTION_EXTRASETTINGS_OTHER_PREFIX))
-			if (this.inputOtherAnswer !== '') {
-				values.push(this.valueOtherAnswer)
+		/**
+		 * Text of the "other" answer field
+		 */
+		otherAnswerText() {
+			if (this.otherAnswer) {
+				return this.otherAnswer.slice(QUESTION_EXTRASETTINGS_OTHER_PREFIX.length)
 			}
+			return ''
+		},
 
-			this.onChange(values)
+		/**
+		 * The full "other" answer including prefix, undefined if no "other answer"
+		 */
+		otherAnswer() {
+			return this.values.find((v) => v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX))
 		},
 	},
 
@@ -228,6 +220,20 @@ export default {
 			this.$emit('update:values', this.isUnique ? [value] : value)
 		},
 
+		/**
+		 * Called when the value of the "other" anwer is changed input
+		 * @param {string} value the new text of the "other" answer
+		 */
+		 onChangeOther(value) {
+			// Prefix the value
+			const prefixedValue = `${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${value}`
+			// emit the values and add the "other" answer
+			this.$emit(
+				'update:values',
+				this.isUnique ? [prefixedValue] : [...this.values.filter((v) => !v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX)), prefixedValue],
+			)
+		},
+
 		/**
 		 * Is the provided answer required ?
 		 * This is needed for checkboxes as html5
@@ -311,12 +317,10 @@ export default {
 			options.push({
 				id: GenRandomId(),
 				questionId: this.id,
-				text: this.inputValue,
+				text: '',
 				local: true,
 			})
 
-			this.inputValue = ''
-
 			// Update question
 			this.updateOptions(options)