Button inside Vuetify's text-field append slot clicking through

Question

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 component

<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 component 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 component slot logic and then I should start using predefined props which is not what I want.

Answer 1

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 recommended, 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"

Answer 2

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