From e41428ef9196e5eea0282a62bc91fda82fec95ba Mon Sep 17 00:00:00 2001
From: don9x2E <revan@kakao.com>
Date: Fri, 27 Feb 2026 01:06:10 +0900
Subject: [PATCH 1/3] 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>
---
 src/components/AppNavigationForm.vue     | 24 ++++----
 src/components/Questions/AnswerInput.vue | 72 ++++++++++++++++++------
 src/mixins/QuestionMultipleMixin.ts      |  3 +-
 3 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index a671c6982..6fcd80e24 100644
--- a/src/components/AppNavigationForm.vue
+++ b/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>
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 426536ba3..dfe76da6d 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/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)
 		},
 
 		/**
diff --git a/src/mixins/QuestionMultipleMixin.ts b/src/mixins/QuestionMultipleMixin.ts
index 0b3a882da..c3df7e78d 100644
--- a/src/mixins/QuestionMultipleMixin.ts
+++ b/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])
 		},

From 327cfc37eb9bff5633e9f7f398ceced71d6029a0 Mon Sep 17 00:00:00 2001
From: don9x2E <revan@kakao.com>
Date: Fri, 27 Feb 2026 01:29:46 +0900
Subject: [PATCH 2/3] Fix lint formatting and update IME E2E expectations

- format AppNavigationForm.vue to satisfy prettier/eslint CI

- register IconPlus in AnswerInput components used by explicit add button

- update IME playwright test to assert explicit Enter intent before option creation

Signed-off-by: don9x2E <revan@kakao.com>
---
 playwright/e2e/ime-input.spec.ts         |   9 +-
 src/components/AppNavigationForm.vue     | 177 ++++++++++++-----------
 src/components/Questions/AnswerInput.vue |   1 +
 3 files changed, 98 insertions(+), 89 deletions(-)

diff --git a/playwright/e2e/ime-input.spec.ts b/playwright/e2e/ime-input.spec.ts
index 6bb78a914..c0ef6aa54 100644
--- a/playwright/e2e/ime-input.spec.ts
+++ b/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('さ')
 	},
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 6fcd80e24..c982f397f 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -6,93 +6,96 @@
 <template>
 	<div>
 		<NcListItem
-		:active="isActive"
-		:actions-aria-label="t('forms', 'Form actions')"
-		:counter-number="form.submissionCount"
-		compact
-		:force-display-actions="forceDisplayActions"
-		:name="formTitle"
-		:to="{
-			name: routerTarget,
-			params: { hash: form.hash },
-		}"
-		@click="mobileCloseNavigation">
-		<template #icon>
-			<NcLoadingIcon v-if="loading" :size="16" />
-			<IconCheck v-else-if="isExpired" :size="16" />
-			<FormsIcon v-else :size="16" />
-		</template>
-		<template v-if="hasSubtitle" #subname>
-			{{ formSubtitle }}
-		</template>
-		<template
-			v-if="!loading && (!readOnly || canEdit || canSeeResults)"
-			#actions>
-			<NcActionRouter
-				v-if="!isArchived && canEdit"
-				close-after-click
-				:disabled="isFormLocked"
-				exact
-				:to="{ name: 'edit', params: { hash: form.hash } }"
-				@click="mobileCloseNavigation">
-				<template #icon>
-					<IconPencil :size="20" />
-				</template>
-				{{ t('forms', 'Edit form') }}
-			</NcActionRouter>
-			<NcActionButton
-				v-if="!isArchived && !readOnly"
-				close-after-click
-				@click="onShareForm">
-				<template #icon>
-					<IconShareVariant :size="20" />
-				</template>
-				{{ t('forms', 'Share form') }}
-			</NcActionButton>
-			<NcActionRouter
-				v-if="canSeeResults"
-				close-after-click
-				exact
-				:to="{ name: 'results', params: { hash: form.hash } }"
-				@click="mobileCloseNavigation">
-				<template #icon>
-					<IconPoll :size="20" />
-				</template>
-				{{ t('forms', 'Results') }}
-			</NcActionRouter>
-			<NcActionButton v-if="canEdit" close-after-click @click="onCloneForm">
-				<template #icon>
-					<IconContentCopy :size="20" />
-				</template>
-				{{ t('forms', 'Copy form') }}
-			</NcActionButton>
-			<NcActionSeparator v-if="canEdit && !readOnly" />
-			<NcActionButton
-				v-if="canEdit && !readOnly"
-				close-after-click
-				:disabled="isFormLocked"
-				@click="onToggleArchive">
-				<template #icon>
-					<IconArchiveOff v-if="isArchived" :size="20" />
-					<IconArchive v-else :size="20" />
-				</template>
-				{{
-					isArchived
-						? t('forms', 'Unarchive form')
-						: t('forms', 'Archive form')
-				}}
-			</NcActionButton>
-			<NcActionButton
-				v-if="canEdit && !readOnly"
-				close-after-click
-				:disabled="isFormLocked"
-				@click="showDeleteDialog = true">
-				<template #icon>
-					<IconDelete :size="20" />
-				</template>
-				{{ t('forms', 'Delete form') }}
-			</NcActionButton>
-		</template>
+			:active="isActive"
+			:actions-aria-label="t('forms', 'Form actions')"
+			:counter-number="form.submissionCount"
+			compact
+			:force-display-actions="forceDisplayActions"
+			:name="formTitle"
+			:to="{
+				name: routerTarget,
+				params: { hash: form.hash },
+			}"
+			@click="mobileCloseNavigation">
+			<template #icon>
+				<NcLoadingIcon v-if="loading" :size="16" />
+				<IconCheck v-else-if="isExpired" :size="16" />
+				<FormsIcon v-else :size="16" />
+			</template>
+			<template v-if="hasSubtitle" #subname>
+				{{ formSubtitle }}
+			</template>
+			<template
+				v-if="!loading && (!readOnly || canEdit || canSeeResults)"
+				#actions>
+				<NcActionRouter
+					v-if="!isArchived && canEdit"
+					close-after-click
+					:disabled="isFormLocked"
+					exact
+					:to="{ name: 'edit', params: { hash: form.hash } }"
+					@click="mobileCloseNavigation">
+					<template #icon>
+						<IconPencil :size="20" />
+					</template>
+					{{ t('forms', 'Edit form') }}
+				</NcActionRouter>
+				<NcActionButton
+					v-if="!isArchived && !readOnly"
+					close-after-click
+					@click="onShareForm">
+					<template #icon>
+						<IconShareVariant :size="20" />
+					</template>
+					{{ t('forms', 'Share form') }}
+				</NcActionButton>
+				<NcActionRouter
+					v-if="canSeeResults"
+					close-after-click
+					exact
+					:to="{ name: 'results', params: { hash: form.hash } }"
+					@click="mobileCloseNavigation">
+					<template #icon>
+						<IconPoll :size="20" />
+					</template>
+					{{ t('forms', 'Results') }}
+				</NcActionRouter>
+				<NcActionButton
+					v-if="canEdit"
+					close-after-click
+					@click="onCloneForm">
+					<template #icon>
+						<IconContentCopy :size="20" />
+					</template>
+					{{ t('forms', 'Copy form') }}
+				</NcActionButton>
+				<NcActionSeparator v-if="canEdit && !readOnly" />
+				<NcActionButton
+					v-if="canEdit && !readOnly"
+					close-after-click
+					:disabled="isFormLocked"
+					@click="onToggleArchive">
+					<template #icon>
+						<IconArchiveOff v-if="isArchived" :size="20" />
+						<IconArchive v-else :size="20" />
+					</template>
+					{{
+						isArchived
+							? t('forms', 'Unarchive form')
+							: t('forms', 'Archive form')
+					}}
+				</NcActionButton>
+				<NcActionButton
+					v-if="canEdit && !readOnly"
+					close-after-click
+					:disabled="isFormLocked"
+					@click="showDeleteDialog = true">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
+					{{ t('forms', 'Delete form') }}
+				</NcActionButton>
+			</template>
 		</NcListItem>
 		<NcDialog
 			:open.sync="showDeleteDialog"
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index dfe76da6d..475b78560 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -109,6 +109,7 @@ export default {
 		IconCheckboxBlankOutline,
 		IconDelete,
 		IconDragIndicator,
+		IconPlus,
 		IconRadioboxBlank,
 		IconTableColumn,
 		IconTableRow,

From 972f2ae50763e025a1e110ac7cb949e25f7f4976 Mon Sep 17 00:00:00 2001
From: don9x2E <revan@kakao.com>
Date: Fri, 27 Feb 2026 22:25:56 +0900
Subject: [PATCH 3/3] Address review feedback for IME option add

Signed-off-by: don9x2E <revan@kakao.com>
---
 src/components/AppNavigationForm.vue     | 201 +++++++++++------------
 src/components/Questions/AnswerInput.vue |  12 +-
 2 files changed, 109 insertions(+), 104 deletions(-)

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index c982f397f..a671c6982 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -4,109 +4,104 @@
 -->
 
 <template>
-	<div>
-		<NcListItem
-			:active="isActive"
-			:actions-aria-label="t('forms', 'Form actions')"
-			:counter-number="form.submissionCount"
-			compact
-			:force-display-actions="forceDisplayActions"
-			:name="formTitle"
-			:to="{
-				name: routerTarget,
-				params: { hash: form.hash },
-			}"
-			@click="mobileCloseNavigation">
-			<template #icon>
-				<NcLoadingIcon v-if="loading" :size="16" />
-				<IconCheck v-else-if="isExpired" :size="16" />
-				<FormsIcon v-else :size="16" />
-			</template>
-			<template v-if="hasSubtitle" #subname>
-				{{ formSubtitle }}
-			</template>
-			<template
-				v-if="!loading && (!readOnly || canEdit || canSeeResults)"
-				#actions>
-				<NcActionRouter
-					v-if="!isArchived && canEdit"
-					close-after-click
-					:disabled="isFormLocked"
-					exact
-					:to="{ name: 'edit', params: { hash: form.hash } }"
-					@click="mobileCloseNavigation">
-					<template #icon>
-						<IconPencil :size="20" />
-					</template>
-					{{ t('forms', 'Edit form') }}
-				</NcActionRouter>
-				<NcActionButton
-					v-if="!isArchived && !readOnly"
-					close-after-click
-					@click="onShareForm">
-					<template #icon>
-						<IconShareVariant :size="20" />
-					</template>
-					{{ t('forms', 'Share form') }}
-				</NcActionButton>
-				<NcActionRouter
-					v-if="canSeeResults"
-					close-after-click
-					exact
-					:to="{ name: 'results', params: { hash: form.hash } }"
-					@click="mobileCloseNavigation">
-					<template #icon>
-						<IconPoll :size="20" />
-					</template>
-					{{ t('forms', 'Results') }}
-				</NcActionRouter>
-				<NcActionButton
-					v-if="canEdit"
-					close-after-click
-					@click="onCloneForm">
-					<template #icon>
-						<IconContentCopy :size="20" />
-					</template>
-					{{ t('forms', 'Copy form') }}
-				</NcActionButton>
-				<NcActionSeparator v-if="canEdit && !readOnly" />
-				<NcActionButton
-					v-if="canEdit && !readOnly"
-					close-after-click
-					:disabled="isFormLocked"
-					@click="onToggleArchive">
-					<template #icon>
-						<IconArchiveOff v-if="isArchived" :size="20" />
-						<IconArchive v-else :size="20" />
-					</template>
-					{{
-						isArchived
-							? t('forms', 'Unarchive form')
-							: t('forms', 'Archive form')
-					}}
-				</NcActionButton>
-				<NcActionButton
-					v-if="canEdit && !readOnly"
-					close-after-click
-					:disabled="isFormLocked"
-					@click="showDeleteDialog = true">
-					<template #icon>
-						<IconDelete :size="20" />
-					</template>
-					{{ t('forms', 'Delete form') }}
-				</NcActionButton>
-			</template>
-		</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>
+	<NcListItem
+		:active="isActive"
+		:actions-aria-label="t('forms', 'Form actions')"
+		:counter-number="form.submissionCount"
+		compact
+		:force-display-actions="forceDisplayActions"
+		:name="formTitle"
+		:to="{
+			name: routerTarget,
+			params: { hash: form.hash },
+		}"
+		@click="mobileCloseNavigation">
+		<template #icon>
+			<NcLoadingIcon v-if="loading" :size="16" />
+			<IconCheck v-else-if="isExpired" :size="16" />
+			<FormsIcon v-else :size="16" />
+		</template>
+		<template v-if="hasSubtitle" #subname>
+			{{ formSubtitle }}
+		</template>
+		<template
+			v-if="!loading && (!readOnly || canEdit || canSeeResults)"
+			#actions>
+			<NcActionRouter
+				v-if="!isArchived && canEdit"
+				close-after-click
+				:disabled="isFormLocked"
+				exact
+				:to="{ name: 'edit', params: { hash: form.hash } }"
+				@click="mobileCloseNavigation">
+				<template #icon>
+					<IconPencil :size="20" />
+				</template>
+				{{ t('forms', 'Edit form') }}
+			</NcActionRouter>
+			<NcActionButton
+				v-if="!isArchived && !readOnly"
+				close-after-click
+				@click="onShareForm">
+				<template #icon>
+					<IconShareVariant :size="20" />
+				</template>
+				{{ t('forms', 'Share form') }}
+			</NcActionButton>
+			<NcActionRouter
+				v-if="canSeeResults"
+				close-after-click
+				exact
+				:to="{ name: 'results', params: { hash: form.hash } }"
+				@click="mobileCloseNavigation">
+				<template #icon>
+					<IconPoll :size="20" />
+				</template>
+				{{ t('forms', 'Results') }}
+			</NcActionRouter>
+			<NcActionButton v-if="canEdit" close-after-click @click="onCloneForm">
+				<template #icon>
+					<IconContentCopy :size="20" />
+				</template>
+				{{ t('forms', 'Copy form') }}
+			</NcActionButton>
+			<NcActionSeparator v-if="canEdit && !readOnly" />
+			<NcActionButton
+				v-if="canEdit && !readOnly"
+				close-after-click
+				:disabled="isFormLocked"
+				@click="onToggleArchive">
+				<template #icon>
+					<IconArchiveOff v-if="isArchived" :size="20" />
+					<IconArchive v-else :size="20" />
+				</template>
+				{{
+					isArchived
+						? t('forms', 'Unarchive form')
+						: t('forms', 'Archive form')
+				}}
+			</NcActionButton>
+			<NcActionButton
+				v-if="canEdit && !readOnly"
+				close-after-click
+				:disabled="isFormLocked"
+				@click="showDeleteDialog = true">
+				<template #icon>
+					<IconDelete :size="20" />
+				</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>
 </template>
 
 <script>
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 475b78560..9caa02b2c 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -68,7 +68,7 @@
 			<NcButton
 				:aria-label="t('forms', 'Add a new answer option')"
 				variant="tertiary"
-				:disabled="isIMEComposing || !canCreateLocalAnswer"
+				:disabled="isIMEComposing"
 				@click="createLocalAnswer">
 				<template #icon>
 					<IconPlus :size="20" />
@@ -301,6 +301,11 @@ export default {
 			}
 		},
 
+		/**
+		 * Handle Enter key: create local answer or move focus
+		 *
+		 * @param {KeyboardEvent} e the keydown event
+		 */
 		onEnter(e) {
 			if (this.answer.local) {
 				this.createLocalAnswer(e)
@@ -309,6 +314,11 @@ export default {
 			this.focusNextInput(e)
 		},
 
+		/**
+		 * 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