CODEWITHSUNDEEP
vue.jsvuetify.js
Igal
Igal

Reputation: 6103

How to prevent TypeError on v-text-field enter key up

I have the following Vuetify form with single v-text-field and a button:

<v-form v-model="valid" ref="form" @submit.prevent>
      <v-container>
        <v-layout>
          <v-flex
            xs12
            md8
          >
            <v-text-field
              v-model="name"
              :rules="nameRules"
              :counter="max"
              maxlength='max'
              :label="$t('Save new name')"
              required
              clearable
              @keyup.enter.prevent='onEnterPressed'
            ></v-text-field>
          </v-flex>

          <v-flex
            xs12
            md4
          >
            <v-btn
              :loading="saving"
              :disabled="!valid || saving"
              color="info"
              @click="processNewName"
            >
              <v-icon left dark>fa-save</v-icon>
              {{ $t('Save') }}
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-form>

Currently these are my methods:

onEnterPressed() {
  console.log('enter pressed');
},
processNewName() {
  ...
}

I'm using @submit.prevent to stop refreshing the page when the Enter button is hit.

So far everything seems to be working. However, when I hit the enter button, in the console I'm getting this error message:

Uncaught TypeError: Cannot read property 'type' of undefined
at e.setFieldValue (onloadwff.js:71)
at HTMLFormElement.formKeydownListener (onloadwff.js:71)

In onloadwff.js the error points to the following code:

if("password"===r.type)

So r is undefined. How can I prevent this from happening? I already tried to use @keyup.enter.prevent.native, tried @keydown.enter.prevent, tried to point @submit.prevent to processNewName method... This error keeps showing up.

I checked in Vuetify site the v-text-field component, and it seems that sometimes they also get this error in some of their examples, but not all of them. But I can't figure out what to do to prevent this from happening. Any ideas?

EDIT

Upon further investigation I fount out that onloadwff.js belongs to LastPass plugin. Checked in different browser without that plugin and saw everything works just fine.

Upvotes: 5

Views: 2642

Answers (1)

C&#233;dric M.
C&#233;dric M.

Reputation: 1182

This error comes from your LastPass plugin and it is discussed on Github on various frameworks:

It's not the best solution, it's more like a workaround, but for now I either:

  • Disable LastPass
  • Avoid using <v-form>

Upvotes: 1

Related Questions