[Vuejs]-Vuetifyjs v-text-field prevent focus when click on append-icon

by

3👍

✅

Use :append-icon and @click:append. That should work.

            <v-text-field
              v-model="password"
              :rules="[rules.required, rules.min]"
              :type="show1 ? 'text' : 'password'"
              name="input-10-1"
              label="Normal with hint text"
              hint="At least 8 characters"
              counter
              :append-icon="show1 ? 'mdi-eye-off' : 'mdi-eye'"
              @click:append="show1 = !show1"
            />

EDIT

If you want to use a template you have to use .stop for the mouseup and click event.

            <v-text-field
              v-model="password"
              :rules="[rules.required, rules.min]"
              :type="show1 ? 'text' : 'password'"
              name="input-10-1"
              label="Normal with hint text"
              hint="At least 8 characters"
              counter
            >
                <template v-slot:append>
                  <v-icon @mouseup.stop @click.prevent.stop="show1 = !show1"> {{ show1 ? 'mdi-eye-off' : 'mdi-eye' }} </v-icon>
                </template>
            </v-text-field>
👤jkoch

1👍

looks like append-outer is the right slot for this, you might need CSS tweaks to get this to match your designs

👤Xavier B.

0👍

Use a ref to access the v-text-field‘s blur() method when clicking on the appended eye icon. This will remove the focus from the field.

Template:

<v-text-field
     v-model="password"
     ...
     ref="myTextField"
>
    <template v-slot:append>
         <v-icon  @click="onClickAppendIcon">
             {{ show1 ? 'mdi-eye-off' : 'mdi-eye' }} 
         </v-icon>
     </template>
</v-text-field>

Script:

onClickAppendIcon() {
  this.show1 = !this.show1
  this.$refs.myTextField.blur()
}
👤zunnzunn

Leave a comment