Avoid Submit on Enter
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
parent
25ff718ddc
commit
53b6851a79
|
@ -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>
|
||||
|
|
|
@ -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}`"
|
||||
|
|
|
@ -40,7 +40,8 @@
|
|||
:maxlength="maxStringLengths.answerText"
|
||||
minlength="1"
|
||||
type="text"
|
||||
@input="onInput">
|
||||
@input="onInput"
|
||||
@keydown.enter.exact.prevent="onKeydownEnter">
|
||||
</div>
|
||||
</Question>
|
||||
</template>
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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 🚀
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue