While working on creating Vuetify's v-text-field with a slot named append containing a button, everything seems to be functioning correctly except for the fact that when I click the button, it goes through and focuses on the text field. On mobile devices, this action even opens up the keyboard.
Below is my code snippet for the 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>
Additionally, here is the button code block which includes the @click.stop directive when invoking the text field component:
<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>
I am looking for a solution to prevent the propagation of the button click event inside the v-text-field. I have already tried using @click.native with the same effect. The documentation mentions @click:append, but that would disrupt my component slot logic, forcing me to use predefined props which is not ideal for my needs.