[Bug Report][3.6.13] v-slide-group returns to the leftmost position unexpectedly on iPhone
#20245 opened on Jul 30, 2024
Description
Environment
Vuetify Version: 3.6.13 Last working version: 3.6.13 Vue Version: 3.4.34 Browsers: Safari OS: iOS
Steps to reproduce
Description: I am experiencing an issue with the v-slide-group component in Vuetify. When tapping on a v-btn within the slide group on an iPhone, the v-slide-group occasionally returns to the leftmost position unexpectedly. This behavior disrupts the user experience, especially when trying to view or interact with items that are not at the beginning of the group.
Steps to Reproduce:
- Create a v-slide-group with multiple v-btn elements (more than can be displayed in the initial view) with click events defined.
- Scroll to an item towards the end of the slide group.
- Select an item that appears after scrolling.
- Observe that the slide group sometimes returns to the leftmost position.
Expected Behavior
The v-slide-group should maintain its current position and not return to the leftmost position unless explicitly directed to do so by user interaction.
Actual Behavior
The v-slide-group intermittently scrolls back to the leftmost position without user intent, making it difficult to interact with items towards the end of the group.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
In the provided example, you can observe the issue by checking it on iPhone's Safari browser. Click the rightmost button once to see it return to the left. In this simplified example, it only returns once, but in more complex scenarios with various functions defined, the leftmost return occurs frequently.
Additional Information: It seems that the iPhone's touch events might be related to this issue. Adding @touchend.prevent='' to the v-slide-group or each v-btn inside it prevents the leftmost return behavior, but it causes the buttons to remain in an active state and makes the code cumbersome and cluttered.
Thank you for your help in resolving this issue.