Avoid Submit on Enter

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>

src/components/Questions/QuestionLong.vue

@@ -40,7 +40,8 @@
 				:maxlength="maxStringLengths.answerText"
 				minlength="1"
 				@input="onInput"
-				@keydown="autoSizeText" />
+				@keypress="autoSizeText"
+				@keydown.ctrl.enter="onKeydownCtrlEnter" />
 		</div>
 	</Question>
 </template>
@@ -74,6 +75,9 @@ export default {
 			textarea.style.cssText = 'height:auto; padding:0'
 			textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
 		},
+		onKeydownCtrlEnter(event) {
+			this.$emit('keydown', event)
+		},
 	},
 }
 </script>

src/components/Questions/QuestionMultiple.vue

@@ -46,7 +46,8 @@
 						:name="`${id}-answer`"
 						:required="isRequired(answer.id)"
 						:type="isUnique ? 'radio' : 'checkbox'"
-						@change="onChange($event, answer.id)">
+						@change="onChange($event, answer.id)"
+						@keydown.enter.exact.prevent="onKeydownEnter">
 					<label v-if="!edit"
 						ref="label"
 						:for="`${id}-answer-${answer.id}`"

src/components/Questions/QuestionShort.vue

@@ -40,7 +40,8 @@
 				:maxlength="maxStringLengths.answerText"
 				minlength="1"
 				type="text"
-				@input="onInput">
+				@input="onInput"
+				@keydown.enter.exact.prevent="onKeydownEnter">
 		</div>
 	</Question>
 </template>

src/mixins/QuestionMixin.js

@@ -136,6 +136,15 @@ export default {
 			this.$emit('delete')
 		},
 
+		/**
+		 * Don't automatically submit form on Enter, parent will handle that
+		 * To be called with prevent: @keydown.enter.prevent="onKeydownEnter"
+		 * @param {Object} event The fired event
+		 */
+		onKeydownEnter(event) {
+			this.$emit('keydown', event)
+		},
+
 		/**
 		 * Focus the first focusable element
 		 */

src/views/Submit.vue

@@ -38,7 +38,9 @@
 			</header>
 
 			<!-- Questions list -->
-			<form v-if="!loading && !success" @submit.prevent="onSubmit">
+			<form v-if="!loading && !success"
+				ref="form"
+				@submit.prevent="onSubmit">
 				<ul>
 					<Questions
 						:is="answerTypes[question.type].component"
@@ -50,9 +52,12 @@
 						:index="index + 1"
 						:max-string-lengths="maxStringLengths"
 						v-bind="question"
-						:values.sync="answers[question.id]" />
+						:values.sync="answers[question.id]"
+						@keydown.enter="onKeydownEnter"
+						@keydown.ctrl.enter="onKeydownCtrlEnter" />
 				</ul>
-				<input class="primary"
+				<input ref="submitButton"
+					class="primary"
 					type="submit"
 					:value="t('forms', 'Submit')"
 					:disabled="loading"
@@ -154,6 +159,27 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * On Enter, focus next form-element
+		 * Last form element is the submit button, the form submits on enter then
+		 * @param {Object} event The fired event.
+		 */
+		onKeydownEnter(event) {
+			const formInputs = Array.from(this.$refs.form)
+			const sourceInputIndex = formInputs.findIndex(input => input === event.originalTarget)
+			// Focus next form element
+			formInputs[sourceInputIndex + 1].focus()
+		},
+
+		/**
+		 * Ctrl+Enter typically fires submit on forms.
+		 * Some inputs do automatically, while some need explicit handling
+		 */
+		onKeydownCtrlEnter() {
+			// Using button-click event to not bypass validity-checks and use our specified behaviour
+			this.$refs.submitButton.click()
+		},
+
 		/**
 		 * Submit the form after the browser validated it 🚀
 		 */