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