Fix auto-advance on ENTER for login form

if user hits ENTER while focused on username field, just set focus to
password field but do not submit form.  if user hits ENTER on while
the password field is focused, then submit form

this has long been the behavior but it was broken when removing jquery
This commit is contained in:
Lance Edgar 2023-02-07 16:12:09 -06:00
parent 5f70a524e9
commit 32fc0415da
3 changed files with 16 additions and 3 deletions

View file

@ -9,7 +9,8 @@
tal:omit-tag="">
<b-input name="${name}"
v-model="${vmodel}"
type="password">
type="password"
tal:attributes="attributes|field.widget.attributes|{};">
</b-input>
</div>
</span>

View file

@ -64,6 +64,13 @@
this.$refs.username.focus()
}
TailboneForm.methods.usernameKeydown = function(event) {
if (event.which == 13) {
event.preventDefault()
this.$refs.password.focus()
}
}
</script>
</%def>

View file

@ -122,9 +122,14 @@ class AuthenticationView(View):
'tailbone', 'main_image_url',
default=self.request.static_url('tailbone:static/img/home_logo.png'))
# nb. hacky..but necessary, to add the ref, for autofocus
# nb. hacky..but necessary, to add the refs, for autofocus
# (also add key handler, so ENTER acts like TAB)
dform = form.make_deform_form()
dform['username'].widget.attributes = {'ref': 'username'}
dform['username'].widget.attributes = {
'ref': 'username',
'@keydown.native': 'usernameKeydown',
}
dform['password'].widget.attributes = {'ref': 'password'}
return {
'form': form,