{"action":"created","issue":{"url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/issues/885","repository_url":"https://api.github.com/repos/telerik/nativescript-ui-feedback","labels_url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/issues/885/labels{/name}","comments_url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/issues/885/comments","events_url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/issues/885/events","html_url":"https://github.com/telerik/nativescript-ui-feedback/issues/885","id":371371786,"node_id":"MDU6SXNzdWUzNzEzNzE3ODY=","number":885,"title":"[Vue] [RadListView] Scroll to Index on iOS won't work until a manual scroll is done","user":{"login":"hazzo","id":13692810,"node_id":"MDQ6VXNlcjEzNjkyODEw","avatar_url":"https://avatars1.githubusercontent.com/u/13692810?v=4","gravatar_id":"","url":"https://api.github.com/users/hazzo","html_url":"https://github.com/hazzo","followers_url":"https://api.github.com/users/hazzo/followers","following_url":"https://api.github.com/users/hazzo/following{/other_user}","gists_url":"https://api.github.com/users/hazzo/gists{/gist_id}","starred_url":"https://api.github.com/users/hazzo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hazzo/subscriptions","organizations_url":"https://api.github.com/users/hazzo/orgs","repos_url":"https://api.github.com/users/hazzo/repos","events_url":"https://api.github.com/users/hazzo/events{/privacy}","received_events_url":"https://api.github.com/users/hazzo/received_events","type":"User","site_admin":false},"labels":[{"id":485849358,"node_id":"MDU6TGFiZWw0ODU4NDkzNTg=","url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/labels/listview","name":"listview","color":"eb6420","default":false},{"id":639675222,"node_id":"MDU6TGFiZWw2Mzk2NzUyMjI=","url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/labels/os:%20ios","name":"os: ios","color":"006b75","default":false},{"id":992843139,"node_id":"MDU6TGFiZWw5OTI4NDMxMzk=","url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/labels/vue","name":"vue","color":"0ecc47","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-10-18T05:54:49Z","updated_at":"2018-10-18T10:03:14Z","closed_at":null,"author_association":"NONE","body":"## Please, provide the details below:\r\n\r\n### Did you verify this is a real problem by searching the [NativeScript Forum](https://discourse.nativescript.org/)?\r\nYes\r\n\r\n### Tell us about the problem\r\nWhen trying to scrollToIndex on iOS (with staggered layout) it won't work until you perform a manual scroll and then execute the `scrollToIndex` method.\r\n\r\n![](https://media.giphy.com/media/1BdsG8okAtqVD0KPT2/giphy.gif)\r\n\r\n### Which platform(s) does your issue occur on?\r\niOS 12.0\r\n\r\n### Please provide the following version numbers that your issue occurs with:\r\n- **Progress NativeScript UI version:**  \"nativescript-ui-listview\": \"^3.7.1\",\r\n- **CLI:** 4.2.4\r\n- **Cross-platform modules:** ^4.2.0\r\n- **Runtime(s):** 4.2.0\r\n\r\n### Please tell us how to recreate the issue in as much detail as possible.\r\n- Create a RadListView with staggered layout\r\n- Try to `scrollToIndex` on load, *won't work*\r\n- Scroll to bottom and then to top manually\r\n- Execute `scrollToIndex` with tap action, *it works*.\r\n- Once you scrolled up and down `scrollToIndex` will now always work.\r\n\r\n### Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.\r\n\r\nTemplate\r\n```html\r\n<template>\r\n    <Page>\r\n        <MainActionBar/>\r\n        <AbsoluteLayout>\r\n            <RadListView ref=\"listView\"\r\n                         for=\"item in itemList\"\r\n                         class=\"chatlist__list\"\r\n                         layout=\"staggered\"\r\n                         gridSpanCount=\"1\"\r\n                         @itemTap=\"onItemTap\"\r\n                         @loaded=\"onLoaded\"\r\n            >\r\n                <v-template>\r\n                    <FlexboxLayout class=\"chatlist__list__element\" flexDirection=\"column\">\r\n                        <Label :text=\"item.name\"></Label>\r\n                        <Label :textWrap=\"true\" :text=\"item.description\"></Label>\r\n                    </FlexboxLayout>\r\n                </v-template>\r\n            </RadListView>\r\n            <FlexboxLayout class=\"chatlist__fab\" alignItems=\"center\" justifyContent=\"center\" @tap=\"onLoaded\">\r\n                <Label class=\"zmdi zmdi-24\" :text=\"'zmdi-plus' | fonticon\"/>\r\n            </FlexboxLayout>\r\n        </AbsoluteLayout>\r\n    </Page>\r\n</template>\r\n```\r\nJavascript\r\n```javascript\r\n    export default {\r\n        data() {\r\n            return {\r\n                itemList: [\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description Item 3 description Item 3 description Item 3 description Item 3 description Item 3 description Item 3 description Item 3 description'},\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                    {name: 'Item 1', description: 'Item 1 description'},\r\n                    {name: 'Item 2', description: 'Item 2 description'},\r\n                    {name: 'Item 3', description: 'Item 3 description'},\r\n                ],\r\n            }\r\n        },\r\n\r\n        methods: {\r\n            onItemTap({item}) {\r\n                console.log(`Tapped on ${item.name}`);\r\n            },\r\n\r\n            onLoaded () {\r\n                setTimeout(() => {\r\n                    console.log('test')\r\n                    this.$refs.listView.scrollToIndex(21, true)\r\n                }, 500);\r\n            },\r\n        },\r\n    }\r\n```\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/issues/comments/430951092","html_url":"https://github.com/telerik/nativescript-ui-feedback/issues/885#issuecomment-430951092","issue_url":"https://api.github.com/repos/telerik/nativescript-ui-feedback/issues/885","id":430951092,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMDk1MTA5Mg==","user":{"login":"NickIliev","id":18008302,"node_id":"MDQ6VXNlcjE4MDA4MzAy","avatar_url":"https://avatars2.githubusercontent.com/u/18008302?v=4","gravatar_id":"","url":"https://api.github.com/users/NickIliev","html_url":"https://github.com/NickIliev","followers_url":"https://api.github.com/users/NickIliev/followers","following_url":"https://api.github.com/users/NickIliev/following{/other_user}","gists_url":"https://api.github.com/users/NickIliev/gists{/gist_id}","starred_url":"https://api.github.com/users/NickIliev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickIliev/subscriptions","organizations_url":"https://api.github.com/users/NickIliev/orgs","repos_url":"https://api.github.com/users/NickIliev/repos","events_url":"https://api.github.com/users/NickIliev/events{/privacy}","received_events_url":"https://api.github.com/users/NickIliev/received_events","type":"User","site_admin":false},"created_at":"2018-10-18T10:03:14Z","updated_at":"2018-10-18T10:03:14Z","author_association":"COLLABORATOR","body":"@hazzo the method `scrollToIndex` is working as expected - in your case the items are not enough so that it can be scrolled (or at least with the default styles they are all visible on the device screen).\r\n\r\nDemo app demonstrating the above case with additional items and margins can be found [here](https://github.com/NickIliev/NS-Issues-2018-II/tree/master/nativescript-ui-feedback/issue-885-vue)"}}
{"actor":{"display_login":"NickIliev"}}