After testing some features of an application that i'm currently developing, I found an interesting behaviour on the tabs component in Vuetify.
In case that you are wondering the same, before you create a new duplicated ticket of the same issue (yep, there are dozens of issues opened in the official repository ponting to the same issue), you may want to read the official documentation of Vuetify. As mentioned in the docs, by default every <v-tab-item> inside the <v-tabs-items> container will be swipeable by an user gesture in mobile devices. This is great in most of the cases for static content that stays in the view and doesn't have horizontal scrolling. However, imagine a case where every tab contains a text editor that doesn't wrap the content in the view, instead it is horizontally scrollable. If the user swipes way to fast, instead of scrolling horizontally in the editor, the next <v-tab-item> will be focused because of the user's gesture.
To solve this, the only logical solution will be to disable swiping forbidding touch gestures with the touchless attribute in the tabs container element (<v-tabs-items>):
<template>
<v-tabs>
<v-tab key="tab1">
Home
</v-tab>
</v-tabs>
<!-- Include the touchless attribute to the v-tabs-items element -->
<v-tabs-items v-model="tab" touchless>
<v-tab-item key="tab1">
Home Content
</v-tab-item>
</v-tabs-items>
</template>This will prevent the vuetify tabs from being changed when the user swipes over the tab's content.
Happy coding ❤️!
