Vue - pressing enter key in input causes app to reload

Questions
#1

Using version: 2.0.10

Whenever I press the “enter” key in this text input, the app reloads.

The code below is the culprit. Whether or not I have the v-on:keyup does not affect the behavior at all. It always reloads.

<f7-input
          type="text"
          placeholder="Add this"
          :value="supplyToAdd"
          v-on:input="supplyToAdd = $event.target.value"
          v-on:keyup.enter="addToSuppliesList"></f7-input>
#2

I don’t know anything about vue, but this sounds like you have a form element around your input which is submitted each time you push the enter button.

1 Like
#3

Yes I do. Could be a pebkac issue.

#4

Sound like you have wrapped it in <form> tag and you have <input type="submit"> in this form. In this case it will submit the form on enter click. You need to prevent form submit on form’s submit event

#5

Here’s the form.

<!--radio select join or create-->
<!--selection determines which button is shown and which instruction are displayed-->

<f7-list-item radio name="Join-Create"
              :checked="toJoin"
              @change="toJoin = true"
              :title="'Join an existing house'"></f7-list-item>
<br><br>
<f7-list-item radio name="Join-Create"
              :checked="!toJoin"
              @change="toJoin = false"
              :title="'Create a new house'"></f7-list-item>

<f7-block>

  <!-- only the button changes each calls a different function-->
  <f7-input type="text"
            placeholder="House name"
            :value="formData.houseName"
            v-on:input="formData.houseName =$event.target.value"></f7-input>

  <f7-input type="text"
            placeholder="Street"
            :value="formData.street"
            v-on:input="formData.street=$event.target.value"></f7-input>

  <f7-input type="text"
            placeholder="City"
            :value="formData.city"
            v-on:input="formData.city =$event.target.value"></f7-input>

  <f7-input type="text"
            placeholder="Country"
            :value="formData.country"
            v-on:input="formData.country=$event.target.value"></f7-input>
  <br>

  <f7-button small round fill color="green" v-if="!toJoin && isformFilled">Create a House</f7-button>
  <f7-button small round fill
             color="gray"
             v-if="!toJoin && !isformFilled"
  @click="createHouse">Create a House</f7-button>

  <f7-button small round fill v-if="toJoin && isformFilled">Join a House</f7-button>
  <f7-button small round fill color="gray" v-if="toJoin && !isformFilled">Join a House</f7-button>

</f7-block>
#6

Same problem here. No form or submit.

#7

Are you also using Vue js?

#8

yes

I also tried keypress.enter documented here: https://framework7.io/vue/form-elements.html#events

But the solution is to remove form - i had it in f7-list form - after removing it the enter stoped reloading (it’s doing nothing now but keypress or keyup still do not catch event)

1 Like
#9

Try v-on:keypress.native=“onKeypress” and handle your enter key manually in onKeypress method

#10

I have this issue also and I’ve discovered it is if you have just one input element wrapped in a form. My workaround was to add a 2nd input element and hide it with css.

3 Likes
#11

you are correct. In my case, I found forms with only one input will have this issue. For forms with multiple inputs, it is fine. I fix this with remove the form tag like:

<f7-list form id="thisisaformid">

change it to

<f7-list id="thisisaformid">

And it works well with my previous code. Even the
this.$f7.form.convertToData("#thisisaform");
it can work.

#12

but surely if you remove the form tag you lose the changes the browser makes to the soft keyboard to navigate between fields - which was the reason I started wrapping my inputs with a form …

#14

it worked for me as well

#15

Worked for me as well, thanks :slight_smile:

#16

You can add v-on:submit.prevent to <form>

#17

don’t worry
this is bug in vue js
Usually this problem appears when there is only one field in the form
no prolim in enter.submit

#18

it works, thanks。but really want to know what cause the issue