Activate Edit-Mode by focus

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

src/components/Questions/Question.vue

@@ -25,7 +25,9 @@
 		:class="{ 'question--edit': edit }"
 		:aria-label="t('forms', 'Question number {index}', {index})"
 		class="question"
-		@click="enableEdit">
+		@click="enableEdit"
+		@focusin="onFocusIn"
+		@focusout="onFocusOut">
 		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div v-if="!readOnly"
@@ -186,6 +188,22 @@ export default {
 			}
 		},
 
+		/**
+		 * Enable & disable resp. edit, if focus jumps to next question (e.g. by tab-navigation)
+		 * @param {Object} event The triggered focusIn/focusOut event
+		 */
+		onFocusIn(event) {
+			if (event.target.closest('.question') !== event.relatedTarget?.closest('.question')) {
+				this.enableEdit()
+			}
+		},
+
+		onFocusOut(event) {
+			if (event.target.closest('.question') !== event.relatedTarget?.closest('.question')) {
+				this.disableEdit()
+			}
+		},
+
 		/**
 		 * Enable the edit mode
 		 */

src/components/Questions/QuestionMultiple.vue

@@ -37,7 +37,10 @@
 		@delete="onDelete">
 		<ul class="question__content">
 			<template v-for="(answer, index) in options">
-				<li v-if="!edit" :key="answer.id" class="question__item">
+				<li v-if="!edit"
+					:key="answer.id"
+					class="question__item"
+					:class="{'question__item--last': (index === options.length-1),}">
 					<!-- Answer radio/checkbox + label -->
 					<!-- TODO: migrate to radio/checkbox component once available -->
 					<input :id="`${id}-answer-${answer.id}`"
@@ -74,7 +77,7 @@
 
 			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
 				<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
-				<input
+				<input ref="inputNewAnswer"
 					:aria-label="t('forms', 'Add a new answer')"
 					:placeholder="t('forms', 'Add a new answer')"
 					class="question__input"
@@ -150,6 +153,15 @@ export default {
 
 				// update parent
 				this.updateOptions(options)
+			} else {
+				// If edit becomes true by tabbing to last element, focus newAnswer-input
+				if (document.activeElement?.parentNode?.classList.contains('question__item--last')) {
+					this.$nextTick(() => {
+						if (this.$refs.inputNewAnswer) {
+							this.$refs.inputNewAnswer.focus()
+						}
+					})
+				}
 			}
 		},
 	},