Allow navigation through edit via Tab-Key
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
parent
8779ded0dc
commit
4dc04b661d
|
@ -36,6 +36,7 @@
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="question__header">
|
<div class="question__header">
|
||||||
<input v-if="edit || !text"
|
<input v-if="edit || !text"
|
||||||
|
ref="titleInput"
|
||||||
:placeholder="titlePlaceholder"
|
:placeholder="titlePlaceholder"
|
||||||
:aria-label="t('forms', 'Title of question number {index}', {index})"
|
:aria-label="t('forms', 'Title of question number {index}', {index})"
|
||||||
:value="text"
|
:value="text"
|
||||||
|
@ -45,7 +46,11 @@
|
||||||
:maxlength="maxQuestionLength"
|
:maxlength="maxQuestionLength"
|
||||||
required
|
required
|
||||||
@input="onTitleChange">
|
@input="onTitleChange">
|
||||||
<h3 v-else class="question__header-title" v-text="computedText" />
|
<h3 v-else
|
||||||
|
class="question__header-title"
|
||||||
|
:tabindex="computedTitleTabIndex"
|
||||||
|
@focus="onTitleFocus"
|
||||||
|
v-text="computedText" />
|
||||||
<div v-if="!edit && !questionValid"
|
<div v-if="!edit && !questionValid"
|
||||||
v-tooltip.auto="warningInvalid"
|
v-tooltip.auto="warningInvalid"
|
||||||
class="question__header-warning icon-error-color"
|
class="question__header-warning icon-error-color"
|
||||||
|
@ -147,6 +152,17 @@ export default {
|
||||||
questionValid() {
|
questionValid() {
|
||||||
return this.text && this.contentValid
|
return this.text && this.contentValid
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Only allow tabbing the title when necessary for edit.
|
||||||
|
* @returns {Number}
|
||||||
|
*/
|
||||||
|
computedTitleTabIndex() {
|
||||||
|
if (!this.readOnly) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
return -1
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -158,6 +174,18 @@ export default {
|
||||||
this.$emit('update:mandatory', mandatory)
|
this.$emit('update:mandatory', mandatory)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow edit-navigation through Tab-Key
|
||||||
|
*/
|
||||||
|
onTitleFocus() {
|
||||||
|
if (!this.readOnly) {
|
||||||
|
this.enableEdit()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.titleInput.focus()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enable the edit mode
|
* Enable the edit mode
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in a new issue