[Bug Report][3.6.13] v-slide-group returns to the leftmost position unexpectedly on iPhone #11086
Annotations
4 notices
|
|
|
context == {
"payload": {
"action": "labeled",
"issue": {
"active_lock_reason": null,
"assignee": null,
"assignees": [],
"author_association": "NONE",
"body": "### Environment\r\n**Vuetify Version:** 3.6.13\r\n**Last working version:** 3.6.13\r\n**Vue Version:** 3.4.34\r\n**Browsers:** Safari\r\n**OS:** iOS\r\n\r\n### Steps to reproduce\r\n**Description:**\r\nI 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.\r\n\r\n**Steps to Reproduce:**\r\n1. Create a v-slide-group with multiple v-btn elements (more than can be displayed in the initial view) with click events defined.\r\n2. Scroll to an item towards the end of the slide group.\r\n3. Select an item that appears after scrolling.\r\n4. Observe that the slide group sometimes returns to the leftmost position.\r\n\r\n### Expected Behavior\r\nThe v-slide-group should maintain its current position and not return to the leftmost position unless explicitly directed to do so by user interaction.\r\n\r\n### Actual Behavior\r\nThe 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.\r\n\r\n### Reproduction Link\r\n[https://play.vuetifyjs.com/#...](https://play.vuetifyjs.com/#eNrtlr9OwzAQxl/l8FKQmhhUYKjSqmy8AUPdIU2uran/yXaCUNV3x06CVFqGSgwslqIo9/l+35dLllseiLMVfTEmbxskU1J4lEaUHudMARRtVhrTPXZFpZUvuUI7SJ3oBK8x21rdfHcOB2uvgAdkxoiseYC3jIDnAmFRCV7tg87IvKBdZ0ITmtCEJjShCU3of6OxvtxsovpzCYpKvyMV9GR3CqWrLDceHPoB59Jo6+EAFjdwhI3VEkZh7RrFdoDg6zxIt4VZ7LgdvaIQGt60FfXN6C4G9JbBjIxJ75bJ0uTvTquwux2iCxsOHCNT6JSohZRYM7Lz3rgppVWtAlaj4K3NFXqqjKSL0EZtozyXmNVaLib5U36flcLsyvyR1tz50+McnczWVn84tMGMkfFJnOebzysih86Q9Jw/TPqIQctEuXYx48KbhsAWbWZR1WjRXjvaGfbbeGctFyPGtzgyFa7wCwRXe3f29SvXffnlX+fufFZ90nGsGiG62+oLG6KkfQ==)\r\n\r\n### Other comments\r\nIn 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.\r\n\r\n**Additional Information:**\r\nIt 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.\r\n\r\n**Thank you for your help in resolving this issue.**\r\n\r\n\r\n<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->",
"closed_at": null,
"comments": 0,
"comments_url": "https://api.github.com/repos/vuetifyjs/vuetify/issues/20245/comments",
"created_at": "2024-07-30T05:28:41Z",
"events_url": "https://api.github.com/repos/vuetifyjs/vuetify/issues/20245/events",
"html_url": "https://github.com/vuetifyjs/vuetify/issues/20245",
"id": 2436930751,
"labels": [
{
"color": "ee0701",
"default": false,
"description": "Functionality that does not work as intended/expected",
"id": 440781591,
"name": "T: bug",
"node_id": "MDU6TGFiZWw0NDA3ODE1OTE=",
"url": "https://api.github.com/repos/vuetifyjs/vuetify/labels/T:%20bug"
},
{
"color": "33aa3f",
"default": true,
"description": "We are looking for community help",
"id": 440781594,
"name": "help wanted",
"node_id": "MDU6TGFiZWw0NDA3ODE1OTQ=",
"url": "https://api.github.com/repos/vuetifyjs/vuetify/labels/help%20wanted"
},
{
"color": "d93f0b",
"default": false,
"description": "The issue only occurs on a specific platform"
|
The logs for this run have expired and are no longer available.
Loading