Merge pull request #3185 from don9x2E/fix/ime-option-creation-followup

Follow up IME option creation and delete dialog timing fixes

Author: Chartman123

playwright/e2e/ime-input.spec.ts

@@ -17,7 +17,7 @@ test.beforeEach(async ({ page }) => {
 })
 
 test(
-	'IME input does not trigger new option',
+	'IME input requires explicit intent to create new option',
 	{
 		annotation: {
 			type: 'issue',
@@ -75,7 +75,12 @@ test(
 		await client.send('Input.insertText', {
 			text: 'さ',
 		})
-		// so there were 4 inputs but those should only result in one new option
+		// Committing composition text alone must not create a new option.
+		await expect(question.answerInputs).toHaveCount(0)
+		await expect(question.newAnswerInput).toHaveValue('さ')
+
+		// Explicit intent (Enter) creates exactly one option.
+		await question.newAnswerInput.press('Enter')
 		await expect(question.answerInputs).toHaveCount(1)
 		await expect(question.answerInputs).toHaveValue('さ')
 	},

src/components/Questions/AnswerInput.vue

@@ -11,17 +11,17 @@
 			class="question__item__pseudoInput" />
 		<input
 			ref="input"
+			v-model="localText"
 			:aria-label="ariaLabel"
 			:placeholder="placeholder"
-			:value="answer.text"
 			class="question__input"
 			:class="{ 'question__input--shifted': !isDropdown }"
 			:maxlength="maxOptionLength"
 			type="text"
 			dir="auto"
 			@input="debounceOnInput"
 			@keydown.delete="deleteEntry"
-			@keydown.enter.prevent="focusNextInput"
+			@keydown.enter.prevent="onEnter"
 			@compositionstart="onCompositionStart"
 			@compositionend="onCompositionEnd" />
 
@@ -64,6 +64,17 @@
 				</template>
 			</NcButton>
 		</div>
+		<div v-else class="option__actions">
+			<NcButton
+				:aria-label="t('forms', 'Add a new answer option')"
+				variant="tertiary"
+				:disabled="isIMEComposing || !canCreateLocalAnswer"
+				@click="createLocalAnswer">
+				<template #icon>
+					<IconPlus :size="20" />
+				</template>
+			</NcButton>
+		</div>
 	</li>
 </template>
 
@@ -98,6 +109,7 @@ export default {
 		IconCheckboxBlankOutline,
 		IconDelete,
 		IconDragIndicator,
+		IconPlus,
 		IconRadioboxBlank,
 		IconTableColumn,
 		IconTableRow,
@@ -163,10 +175,18 @@ export default {
 			queue: null,
 			debounceOnInput: null,
 			isIMEComposing: false,
+			localText: this.answer?.text ?? '',
 		}
 	},
 
 	computed: {
+		canCreateLocalAnswer() {
+			if (this.answer.local) {
+				return !!this.localText?.trim()
+			}
+			return !!this.answer.text?.trim()
+		},
+
 		ariaLabel() {
 			if (this.answer.local) {
 				if (this.optionType === OptionType.Column) {
@@ -239,6 +259,17 @@ export default {
 		},
 	},
 
+	watch: {
+		// Keep localText in sync when the parent replaces/updates the answer prop
+		answer: {
+			handler(newVal) {
+				this.localText = newVal?.text ?? ''
+			},
+
+			deep: true,
+		},
+	},
+
 	created() {
 		this.queue = new PQueue({ concurrency: 1 })
 
@@ -266,34 +297,72 @@ export default {
 		 * @param {InputEvent} event The input event that triggered adding a new entry
 		 */
 		async onInput({ target, isComposing }) {
+			if (this.answer.local) {
+				this.localText = target.value
+				return
+			}
+
 			if (!isComposing && !this.isIMEComposing && target.value !== '') {
 				// clone answer
 				const answer = { ...this.answer }
 				answer.text = this.$refs.input.value
 
-				if (this.answer.local) {
-					// Dispatched for creation. Marked as synced
-					this.$set(this.answer, 'local', false)
-					const newAnswer = await this.createAnswer(answer)
+				await this.updateAnswer(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
+				// Forward changes, but use current answer.text to avoid erasing
+				// any in-between changes while updating the answer
+				answer.text = this.$refs.input.value
+				this.$emit('update:answer', this.index, answer)
+			}
+		},
 
-					this.$emit('create-answer', this.index, newAnswer)
-				} else {
-					await this.updateAnswer(answer)
+		/**
+		 * Handle Enter key: create local answer or move focus
+		 *
+		 * @param {KeyboardEvent} e the keydown event
+		 */
+		onEnter(e) {
+			if (this.answer.local) {
+				this.createLocalAnswer(e)
+				return
+			}
+			this.focusNextInput(e)
+		},
 
-					// Forward changes, but use current answer.text to avoid erasing
-					// any in-between changes while updating the answer
-					answer.text = this.$refs.input.value
-					this.$emit('update:answer', this.index, answer)
-				}
+		/**
+		 * Create a new local answer option from the current input
+		 *
+		 * @param {Event} e the triggering event
+		 */
+		async createLocalAnswer(e) {
+			if (this.isIMEComposing || e?.isComposing) {
+				return
+			}
+
+			const value = this.localText ?? ''
+			if (!value.trim()) {
+				return
 			}
+
+			const answer = { ...this.answer }
+			answer.text = value
+
+			// Dispatched for creation. Marked as synced
+			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.localText = ''
+
+			this.$emit('create-answer', this.index, newAnswer)
 		},
 
 		/**
 		 * Request a new answer
+		 *
+		 * @param {Event} e the triggering event
 		 */
 		focusNextInput(e) {
 			if (this.isIMEComposing || e?.isComposing) {

src/mixins/QuestionMultipleMixin.ts

@@ -176,7 +176,8 @@ export default defineComponent({
 		 */
 		onCreateAnswer(index: number, answer: FormsOption): void {
 			this.$nextTick(() => {
-				this.$nextTick(() => this.focusIndex(index, answer.optionType))
+				// Move focus to the newly appended empty local option.
+				this.$nextTick(() => this.focusIndex(index + 1, answer.optionType))
 			})
 			this.updateOptions([...this.options, answer])
 		},