Vuetify: [Feature Rquest] v-form prop: Enter key submits form

[amesas]

Prop could setup other keys, not only Enter.

Should take care of textareas, checkbox, etc...

[smares]

Isn't this your responsability using @keyup? I thought Vuetify doesn't modify default form submission behavior of browsers.

[nekosaur]

VForm component now passes down listeners to <form> element. So you can do this

<v-form @submit="whatever">
  <v-btn type="submit">Submit</v-btn>
</v-form>

And it should trigger when pressing enter

[Toilal]

Maybe docs example should showcase this behavior.

[Bugari]

I tried doing exactly what @nekosaur described, but cannot force it to work:

https://codepen.io/anon/pen/oEqJoM?editors=1011

@submit never executes method on pressing enter...

[nekosaur]

Please come to our chat (https://chat.vuetifyjs.com) if you need help. Commenting on closed issues just adds clutter, and you risk being overlooked.

As to why it doesn't work, submit is only fired if there is a single input element in the form.

[artofcompute]

The workaround I used was to add an event listener to watch for enter key:

export default {
  mounted () {
    let self = this
    window.addEventListener('keyup', function (event) {
      if (event.keyCode === 13) {
        self.submit()
      }
    })
  },
  methods: {
    submit () {
      console.log(this.username)
  }
}

[dbettini]

@rudresh4 there is really no need to add listeners to window like that. Firstly, what @nekosaur wrote works. The submit event can be used. Secondly, vue allows you to add listeners directly to the DOM element/component directly in the template, so in the case of v-form what you wrote would be just

<v-form @keyup.native.enter="submit">...</v-form>

or with validation

<v-form v-model="valid" @keyup.native.enter="valid && submit($event)">...</v-form>

[mix3d]

The important thing to remember here is that in native HTML a form won't submit on enter if there is only text elements; it needs a submit element, which can be done manually with <input type="submit" />, but better done as Vuetify <v-btn type="submit">..., just make sure it's inside the v-form

[Made-of-Clay]

@mix3d That's not accurate. I just did a test with a form and only one text input. The form submits when I hit enter in the text input. Having an <input type="submit> is not necessary for form submission.

[KaelWD]

See #2159