Fix option creation flow during IME composition

The previous IME fix still allowed option-creation side effects from input events and did not fully protect Enter-driven actions during composition.

This change switches local option creation to explicit user intent (Enter or add button after composition), keeps updates for existing options, and guards Enter/delete handlers with composition checks.

It also moves focus to the next empty local option after creating one, and renders the delete-form confirmation dialog outside the actions slot so it opens immediately when clicked.

Signed-off-by: don9x2E <revan@kakao.com>

Author: don9x2E

src/components/AppNavigationForm.vue

@@ -4,7 +4,8 @@
 -->
 
 <template>
-	<NcListItem
+	<div>
+		<NcListItem
 		:active="isActive"
 		:actions-aria-label="t('forms', 'Form actions')"
 		:counter-number="form.submissionCount"
@@ -91,17 +92,18 @@
 				</template>
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
-			<NcDialog
-				:open.sync="showDeleteDialog"
-				:name="t('forms', 'Delete form')"
-				:message="
-					t('forms', 'Are you sure you want to delete {title}?', {
-						title: formTitle,
-					})
-				"
-				:buttons="buttons" />
 		</template>
-	</NcListItem>
+		</NcListItem>
+		<NcDialog
+			:open.sync="showDeleteDialog"
+			:name="t('forms', 'Delete form')"
+			:message="
+				t('forms', 'Are you sure you want to delete {title}?', {
+					title: formTitle,
+				})
+			"
+			:buttons="buttons" />
+	</div>
 </template>
 
 <script>

src/components/Questions/AnswerInput.vue

@@ -21,7 +21,7 @@
 			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>
 
@@ -167,6 +178,10 @@ export default {
 	},
 
 	computed: {
+		canCreateLocalAnswer() {
+			return !!this.$refs.input?.value?.trim()
+		},
+
 		ariaLabel() {
 			if (this.answer.local) {
 				if (this.optionType === OptionType.Column) {
@@ -266,30 +281,55 @@ export default {
 		 * @param {InputEvent} event The input event that triggered adding a new entry
 		 */
 		async onInput({ target, isComposing }) {
+			if (this.answer.local) {
+				this.$set(this.answer, 'text', 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)
+		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)
-				}
+		async createLocalAnswer(e) {
+			if (this.isIMEComposing || e?.isComposing) {
+				return
 			}
+
+			const value = this.$refs.input?.value ?? ''
+			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.$emit('create-answer', this.index, newAnswer)
 		},
 
 		/**

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])
 		},