{"action":"created","issue":{"url":"https://api.github.com/repos/winjs/react-winjs/issues/27","labels_url":"https://api.github.com/repos/winjs/react-winjs/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/winjs/react-winjs/issues/27/comments","events_url":"https://api.github.com/repos/winjs/react-winjs/issues/27/events","html_url":"https://github.com/winjs/react-winjs/issues/27","id":108423090,"number":27,"title":"ListView within a Pivot not re-rendering?","user":{"login":"staxmanade","id":156715,"avatar_url":"https://avatars.githubusercontent.com/u/156715?v=3","gravatar_id":"","url":"https://api.github.com/users/staxmanade","html_url":"https://github.com/staxmanade","followers_url":"https://api.github.com/users/staxmanade/followers","following_url":"https://api.github.com/users/staxmanade/following{/other_user}","gists_url":"https://api.github.com/users/staxmanade/gists{/gist_id}","starred_url":"https://api.github.com/users/staxmanade/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/staxmanade/subscriptions","organizations_url":"https://api.github.com/users/staxmanade/orgs","repos_url":"https://api.github.com/users/staxmanade/repos","events_url":"https://api.github.com/users/staxmanade/events{/privacy}","received_events_url":"https://api.github.com/users/staxmanade/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/winjs/react-winjs/labels/.kind:%20question","name":".kind: question","color":"c7def8"}],"state":"closed","locked":false,"assignee":{"login":"rigdern","id":199935,"avatar_url":"https://avatars.githubusercontent.com/u/199935?v=3","gravatar_id":"","url":"https://api.github.com/users/rigdern","html_url":"https://github.com/rigdern","followers_url":"https://api.github.com/users/rigdern/followers","following_url":"https://api.github.com/users/rigdern/following{/other_user}","gists_url":"https://api.github.com/users/rigdern/gists{/gist_id}","starred_url":"https://api.github.com/users/rigdern/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rigdern/subscriptions","organizations_url":"https://api.github.com/users/rigdern/orgs","repos_url":"https://api.github.com/users/rigdern/repos","events_url":"https://api.github.com/users/rigdern/events{/privacy}","received_events_url":"https://api.github.com/users/rigdern/received_events","type":"User","site_admin":false},"milestone":null,"comments":6,"created_at":"2015-09-25T23:25:16Z","updated_at":"2015-10-02T04:21:09Z","closed_at":"2015-10-02T04:21:08Z","body":"Hey All,\r\n\r\nFirst I'd like to say thanks for creating this. While I'm not particularly excited with the \"magic\" I don't yet understand on the layers of abstraction added, I am very interested in how much easier it is to reason about building WinJS apps using React...\r\n\r\nI am struggling to debug the following scenario.\r\n\r\nI've created a `SearchHub` component (think of this component as very similar to the example search movies http://winjs.github.io/react-winjs/examples/movies/index.html component).\r\n\r\nThe biggest difference is I'm trying to place it inside of a `Pivot` control.\r\n\r\nWhen the app first loads up and I search, it fills out the `ListView` great. I click on the item to navigate to the details view. When I come back the `ListView` is not re-rendering and is blank...\r\n\r\nMy first issue was due to React state problem, but I've worked out the state correctly. If I use the `SearchHub` component by itself it correctly re-renders the `ListView` on back navigation. However once placed inside a `PivotItem` back navigation does not appear to correctly render the ListView.\r\n\r\n\r\n# Correctly renders search/listView on back navigation from details page\r\n\r\n```\r\nreturn (\r\n                // <Pivot style={pivotStyle}>\r\n                //     <Pivot.Item key=\"search\" header=\"Search\">\r\n                        <SearchHub search={this.state.search} />\r\n                //     </Pivot.Item>\r\n                //     <Pivot.Item key=\"featured\" header=\"Featured\">\r\n                //         <FeaturedHub />\r\n                //     </Pivot.Item>\r\n                // </Pivot>\r\n    }\r\n```\r\n\r\n# Does NOT render search/listView on back navigation from details page\r\n\r\n```\r\nreturn (\r\n                <Pivot style={pivotStyle}>\r\n                    <Pivot.Item key=\"search\" header=\"Search\">\r\n                        <SearchHub search={this.state.search} />\r\n                    </Pivot.Item>\r\n                    <Pivot.Item key=\"featured\" header=\"Featured\">\r\n                        <FeaturedHub />\r\n                    </Pivot.Item>\r\n                </Pivot>\r\n    }\r\n```\r\n\r\nAny thoughts or tips on how to debug this?\r\n"},"comment":{"url":"https://api.github.com/repos/winjs/react-winjs/issues/comments/144912884","html_url":"https://github.com/winjs/react-winjs/issues/27#issuecomment-144912884","issue_url":"https://api.github.com/repos/winjs/react-winjs/issues/27","id":144912884,"user":{"login":"staxmanade","id":156715,"avatar_url":"https://avatars.githubusercontent.com/u/156715?v=3","gravatar_id":"","url":"https://api.github.com/users/staxmanade","html_url":"https://github.com/staxmanade","followers_url":"https://api.github.com/users/staxmanade/followers","following_url":"https://api.github.com/users/staxmanade/following{/other_user}","gists_url":"https://api.github.com/users/staxmanade/gists{/gist_id}","starred_url":"https://api.github.com/users/staxmanade/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/staxmanade/subscriptions","organizations_url":"https://api.github.com/users/staxmanade/orgs","repos_url":"https://api.github.com/users/staxmanade/repos","events_url":"https://api.github.com/users/staxmanade/events{/privacy}","received_events_url":"https://api.github.com/users/staxmanade/received_events","type":"User","site_admin":false},"created_at":"2015-10-02T04:21:08Z","updated_at":"2015-10-02T04:21:08Z","body":"Thank you @rigdern. I implemented the following work-around based on your suggestion and it's working great.\r\n\r\nIn the React component where `render` returns a `Pivot` I have this:\r\n\r\n```\r\n    hackFixForListView() {\r\n        // due to a bug in WinJS\r\n        // https://github.com/winjs/react-winjs/issues/27\r\n        // we need to forceLayout here for listViews\r\n        console.warn('hackFixForListView called: https://github.com/winjs/react-winjs/issues/27');\r\n        [].slice.call(document.querySelectorAll('.win-listview'))\r\n            .forEach(function(item){\r\n                item.winControl.forceLayout();\r\n            });\r\n    }\r\n```\r\n\r\nOn the `Pivot` control I use this:\r\n\r\n```\r\n                <Pivot onItemAnimationEnd={this.hackFixForListView}>\r\n                    <Pivot.Item key=\"search\" header=\"Search\">\r\n                        <SearchHub search={this.state.search} />\r\n                    </Pivot.Item>\r\n                </Pivot>\r\n```\r\n\r\nThis is working great for now. I'll keep an eye on the open WinJS issue and remove the work-around when it's updated."}}