CODEWITHSUNDEEP
vue.jsvuetify.js
Park
Park

Reputation: 173

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

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

Upvotes: 2

Views: 3769

Answers (4)

dxlliv
dxlliv

Reputation: 482

For the dudes wondering how to do this with Vuetify 3,
@mousedown.stop @mouseup.stop @click.stop is the right approach.

Source:
https://discord.com/channels/340160225338195969/1239971305663500290

Upvotes: 0

jkoch
jkoch

Reputation: 806

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>

Upvotes: 5

Xavier B.
Xavier B.

Reputation: 543

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

Upvotes: 2

zunnzunn
zunnzunn

Reputation: 392

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

Upvotes: 1

Related Questions