Vuetifyjs v-text-field prevent focus when click on append-icon - vue.js

Question

I want to create a template for the append icon (multi icon).
When I click on the icon, it will focus on the input field.
How to prevent it?
[1]: https://codepen.io/tructubinh/pen/ExoyMrv?editors=101

Answer 1

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>

Answer 2

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

Answer 3

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()
}