I am trying to create Vuetify's v-text-field with slot named append and the slot contains button. Everything is working fine except the fact that my click clicks through button and focuses text-field and on mobile opening keyboard.

This is my text-field ponent

<v-text-field
    class="search-input"
    solo
    hide-details
    rounded
    elevation-12
    :placeholder="searchFieldPlaceholder"
    aria-label="Search"
    @input="searchDidChange"
  >
    <slot slot="append" name="end" />
</v-text-field>

This is my button, which contains the @click.stop when I call my text-field ponent out

<template v-slot:end>
    <v-btn
      text
      icon
      class="ml-2"
      aria-label="List view"
      @click.stop="gridView = !gridView"
    >
      <v-icon>view_list</v-icon>
    </v-btn>
</template>

My question is how should I stop the button to propagate inside v-text-field? I also tried @click.native and the effect is the same. The documentation also mentioned about @click:append but this will break my ponent slot logic and then I should start using predefined props which is not what I want.

I am trying to create Vuetify's v-text-field with slot named append and the slot contains button. Everything is working fine except the fact that my click clicks through button and focuses text-field and on mobile opening keyboard.

This is my text-field ponent

<v-text-field
    class="search-input"
    solo
    hide-details
    rounded
    elevation-12
    :placeholder="searchFieldPlaceholder"
    aria-label="Search"
    @input="searchDidChange"
  >
    <slot slot="append" name="end" />
</v-text-field>

This is my button, which contains the @click.stop when I call my text-field ponent out

<template v-slot:end>
    <v-btn
      text
      icon
      class="ml-2"
      aria-label="List view"
      @click.stop="gridView = !gridView"
    >
      <v-icon>view_list</v-icon>
    </v-btn>
</template>

My question is how should I stop the button to propagate inside v-text-field? I also tried @click.native and the effect is the same. The documentation also mentioned about @click:append but this will break my ponent slot logic and then I should start using predefined props which is not what I want.

• javascript
• vue.js
• vuetify.js

• Isn't your v-btn inside the v-text-field? – Jesper Commented Dec 20, 2019 at 9:23
• This this case i think you're forced to use append-outer if you don't want the input focus. Without hacking a solution. – Jesper Commented Dec 20, 2019 at 9:37
• Can you refer to where Vuetify does it them selfs? In their slot example, their append is doing the exact same as yours – Jesper Commented Dec 20, 2019 at 9:45
• They're both showing with usage of the props and with slots. With the props the input won't get focused, but with the slots it does exactly the same behavior as yours – Jesper Commented Dec 20, 2019 at 9:50

2 Answers 2

From the code you're showing, you can skip all the slot usage, and use in append and @click:append

So your code would looks like this:

<v-text-field
       class="search-input"
       solo
       hide-details
       rounded
       elevation-12
       :placeholder="searchFieldPlaceholder"
       aria-label="Search"
       @input="searchDidChange"
       append-icon="view_list"
       @click:append="gridView = !gridView"
/>

Not remended, but a hacked way to not make the

Change your @click to do the following:

$refs.searchInput.blur(), gridView = !gridView

And add the following to the v-text-field

ref="searchInput"

Try adding @click:append="" in your v-text-field