Merge pull request #413 from nextcloud/fix/submit_enter
Avoid Submit on Enter
This commit is contained in:
commit
5a3c8ff98d
|
@ -40,7 +40,8 @@
|
||||||
:maxlength="maxStringLengths.answerText"
|
:maxlength="maxStringLengths.answerText"
|
||||||
minlength="1"
|
minlength="1"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@keydown="autoSizeText" />
|
@keypress="autoSizeText"
|
||||||
|
@keydown.ctrl.enter="onKeydownCtrlEnter" />
|
||||||
</div>
|
</div>
|
||||||
</Question>
|
</Question>
|
||||||
</template>
|
</template>
|
||||||
|
@ -74,6 +75,9 @@ export default {
|
||||||
textarea.style.cssText = 'height:auto; padding:0'
|
textarea.style.cssText = 'height:auto; padding:0'
|
||||||
textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
|
textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
|
||||||
},
|
},
|
||||||
|
onKeydownCtrlEnter(event) {
|
||||||
|
this.$emit('keydown', event)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -46,7 +46,8 @@
|
||||||
:name="`${id}-answer`"
|
:name="`${id}-answer`"
|
||||||
:required="isRequired(answer.id)"
|
:required="isRequired(answer.id)"
|
||||||
:type="isUnique ? 'radio' : 'checkbox'"
|
:type="isUnique ? 'radio' : 'checkbox'"
|
||||||
@change="onChange($event, answer.id)">
|
@change="onChange($event, answer.id)"
|
||||||
|
@keydown.enter.exact.prevent="onKeydownEnter">
|
||||||
<label v-if="!edit"
|
<label v-if="!edit"
|
||||||
ref="label"
|
ref="label"
|
||||||
:for="`${id}-answer-${answer.id}`"
|
:for="`${id}-answer-${answer.id}`"
|
||||||
|
|
|
@ -40,7 +40,8 @@
|
||||||
:maxlength="maxStringLengths.answerText"
|
:maxlength="maxStringLengths.answerText"
|
||||||
minlength="1"
|
minlength="1"
|
||||||
type="text"
|
type="text"
|
||||||
@input="onInput">
|
@input="onInput"
|
||||||
|
@keydown.enter.exact.prevent="onKeydownEnter">
|
||||||
</div>
|
</div>
|
||||||
</Question>
|
</Question>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -136,6 +136,15 @@ export default {
|
||||||
this.$emit('delete')
|
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
|
* Focus the first focusable element
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -38,7 +38,9 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Questions list -->
|
<!-- Questions list -->
|
||||||
<form v-if="!loading && !success" @submit.prevent="onSubmit">
|
<form v-if="!loading && !success"
|
||||||
|
ref="form"
|
||||||
|
@submit.prevent="onSubmit">
|
||||||
<ul>
|
<ul>
|
||||||
<Questions
|
<Questions
|
||||||
:is="answerTypes[question.type].component"
|
:is="answerTypes[question.type].component"
|
||||||
|
@ -50,9 +52,12 @@
|
||||||
:index="index + 1"
|
:index="index + 1"
|
||||||
:max-string-lengths="maxStringLengths"
|
:max-string-lengths="maxStringLengths"
|
||||||
v-bind="question"
|
v-bind="question"
|
||||||
:values.sync="answers[question.id]" />
|
:values.sync="answers[question.id]"
|
||||||
|
@keydown.enter="onKeydownEnter"
|
||||||
|
@keydown.ctrl.enter="onKeydownCtrlEnter" />
|
||||||
</ul>
|
</ul>
|
||||||
<input class="primary"
|
<input ref="submitButton"
|
||||||
|
class="primary"
|
||||||
type="submit"
|
type="submit"
|
||||||
:value="t('forms', 'Submit')"
|
:value="t('forms', 'Submit')"
|
||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
|
@ -154,6 +159,27 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
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 🚀
|
* Submit the form after the browser validated it 🚀
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in a new issue