diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue index cb64cbc..ba04178 100644 --- a/src/components/Questions/Question.vue +++ b/src/components/Questions/Question.vue @@ -25,9 +25,7 @@ :class="{ 'question--edit': edit }" :aria-label="t('forms', 'Question number {index}', {index})" class="question" - @click="enableEdit" - @focusin="onFocusIn" - @focusout="onFocusOut"> + @click="enableEdit">
+ @input="onTitleChange" + @keydown.shift.tab.capture="nextDisableEdit">

{ + console.debug('NextTick!') 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 */ enableEdit() { + console.debug('enableEdit') if (!this.readOnly) { this.$emit('update:edit', true) } @@ -217,11 +204,24 @@ export default { * Disable the edit mode */ disableEdit() { + console.debug('disableEdit') if (!this.readOnly) { this.$emit('update:edit', false) } }, + nextDisableEdit(event) { + console.debug('nextDisable') + console.debug(event) + // event.preventDefault() + // this.disableEdit() + this.$nextTick(() => { + console.debug('Later!') + }) + console.debug('trigger') + // this.disableEdit() + }, + /** * Delete this question */ diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue index 423d682..32faf3c 100644 --- a/src/components/Questions/QuestionMultiple.vue +++ b/src/components/Questions/QuestionMultiple.vue @@ -39,8 +39,7 @@