[V1] [Solved] Form submits twice

[mKomo]

Hi all.

I’m using the following component (I’ve removed all unnecessary parts)

The issue is when ENTER is pressed in the input field, the form submits twice.

I’ve fixed the issue by removing the form element completely and just having inputfields and buttons but this seems a bit crude.

<template>
  <q-form
    @submit="onSubmit"
    autofocus
    >


   <q-input
    v-model="form.field"
    placeholder="Invitation Code"
    />

   <q-btn
    label="Submit"
    type="submit"
    color="primary"
   />

  </q-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        field: '',
      }
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form.field)
    }
  }
};

</script>

Theres probably something obvious I’m missing but thanks in advance in any case.

Edit:
-Typos

Solution

Update from beta .14 to .16

[s.molinari]

Is your problem solved? I can’t reproduce it.

https://codepen.io/smolinari/pen/JVydVm

Scott

[mKomo]

@s-molinari Unfortunately not I think the problem lies somewhere else in my codebase.

Possibly poor namespacing etc.

In any case the error doesn’t lie with the component itself. I’ll investigate further and post the solution in my case if its solved

[mKomo]

So digging into it further, remove type="submit" from the q-btn seems to fix the issue, I’ve got no idea why so ill keep looking into it

[mKomo]

Ok so I updated from beta .14 to .16 everythings fine even with type="submit"

Copied from release notes:

fix(QBtn): [v1] Submit on form with “enter” generates 2 requests #3812

[s.molinari]

Yes, when reporting bugs or asking if there is a possible bug here, it’s always best to have your Quasar up-to-date, before you report it. Thanks!

Scott