How to submit v-form with enter key?

[9mm]

I have a form with a single input and a save button. I'm trying to get the input allow submitting via the enter key.

Note that it's NOT server-side submit, but the typical preventDefault submit behavior as if you had simply pushed a <button type="submit">submit</button>

I was trying to work with handleSubmit but it uses a promise so I'm not exactly sure how to just submit the form?

        <v-form v-slot="{ meta, handleSubmit }" :validation-schema="validationSchema" @submit="onSubmit">
          <div class="flex flex-row items-start">
            <base-input-number
              @keyup.enter="xyz(handleSubmit, $event)"
              :model-value="inputValue"
              @update:modelValue="onUpdate"
            />
            <base-button :loading="submitting" :disabled="!meta.touched || !meta.valid" class="ml-2 py-1" size="xs">save</base-button>
          </div>
        </v-form>

[9mm]

Fixed with this:

<v-form ref="form"
...
            <base-input-number
              @keyup.enter="onKeyup"
...

    onKeyup(event) {
      event.target.blur(); // force blur input to update values
      this.$refs.form.$el.dispatchEvent(new Event('submit'));
    },

[9mm]

@logaretm This actually causes a full page submit in Firefox 🤔 is that a bug?

[logaretm]

No, you need to listen for the submit event, otherwise vee-validate assumed you want to use full page submit

[9mm]

I already am in my example code? (my later example is just bare minimum snippet to show my answer, but the @submit event is there)

<v-form v-slot="{ meta, handleSubmit }" :validation-schema="validationSchema" @submit="onSubmit">

[9mm]

Also I should mention it works in Safari + Chrome, FF is full page submit

[9mm]

https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-forked-hwhks?file=/src/App.vue

put your cursor in the first input (after the API finishes loading). Then hit "Enter" key on chrome. Form doesn't submit. On FF it does submit

[9mm]

FF 86.0.1. Just updated though and FF 87 does same thing

[9mm]

also I'm using OSX

[9mm]

did that help at all?

[logaretm]

Hey, yea that's a firefox issue only. The workaround is to add cancellable flag to the dispatched event:

el.dispatchEvent(new Event("submit", { cancelable: true}));

And that should allow vee-validate to prevent the default submission.