diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue index 1ea8711..ab43581 100644 --- a/src/components/Questions/Question.vue +++ b/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">
-

+

{ + this.$refs.titleInput.focus() + }) + } + }, + + /** + * 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 */ diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue index abdfa3a..423d682 100644 --- a/src/components/Questions/QuestionMultiple.vue +++ b/src/components/Questions/QuestionMultiple.vue @@ -37,7 +37,10 @@ @delete="onDelete">