{"action":"opened","issue":{"url":"https://api.github.com/repos/lhorie/mithril.js/issues/682","labels_url":"https://api.github.com/repos/lhorie/mithril.js/issues/682/labels{/name}","comments_url":"https://api.github.com/repos/lhorie/mithril.js/issues/682/comments","events_url":"https://api.github.com/repos/lhorie/mithril.js/issues/682/events","html_url":"https://github.com/lhorie/mithril.js/issues/682","id":89644441,"number":682,"title":"Bug: toggle component elements on/off cause rendering / virtual diff problems","user":{"login":"sixtram","id":11465750,"avatar_url":"https://avatars.githubusercontent.com/u/11465750?v=3","gravatar_id":"","url":"https://api.github.com/users/sixtram","html_url":"https://github.com/sixtram","followers_url":"https://api.github.com/users/sixtram/followers","following_url":"https://api.github.com/users/sixtram/following{/other_user}","gists_url":"https://api.github.com/users/sixtram/gists{/gist_id}","starred_url":"https://api.github.com/users/sixtram/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sixtram/subscriptions","organizations_url":"https://api.github.com/users/sixtram/orgs","repos_url":"https://api.github.com/users/sixtram/repos","events_url":"https://api.github.com/users/sixtram/events{/privacy}","received_events_url":"https://api.github.com/users/sixtram/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-06-19T19:41:19Z","updated_at":"2015-06-19T19:41:19Z","closed_at":null,"body":"The following sample creates a component (GridComponent), which creates two rows (RowComponents), each have a button. Clicking the button increases a global counter and calls m.render().\r\n\r\nDuring render if the render count is odd/even we want to toggle the 2nd row on and off. However mithril fails to render the second row between the >>>>> and <<<<< div elements. At the same time it correctly renders the other elements.\r\n\r\n*********\r\n\r\n    <script type=\"text/javascript\">\r\n        var counter = 1;\r\n\r\n        var RowComponent = {\r\n            controller: function () {\r\n                console.log(\"RowComponent.controller() called\");\r\n                return {};\r\n            },\r\n            view: function (controller, args) {\r\n                console.log(\"RowComponent.view() called\");\r\n                return m(\"div\", [\r\n                    \"I'm a row element. My name is \" + args.fullName + \" \",\r\n                    m(\"button\", {\r\n                        onclick: function () {\r\n                            counter++;\r\n                            rerender();\r\n                        }\r\n                    }, \"Increase and toggle and rerender\")]);\r\n            }\r\n        };\r\n\r\n        var GridComponent = {\r\n            controller: function (args) {\r\n                console.log(\"GridComponent.controller() called\");\r\n                return {};\r\n            },\r\n            view: function (ctrl, args) {\r\n                console.log(\"GridComponent.view() called\");\r\n                var rows = [];\r\n\r\n                rows.push(m(\"div\", \"First row\"));\r\n\r\n                // Add first row.\r\n                rows.push(m.component(RowComponent, {\r\n                    key: 100, fullName: \"1st\"\r\n                }));\r\n\r\n                // Show/hide second row based on counter.\r\n                if (counter % 2 == 1) {\r\n                    rows.push(m(\"div\", \">>>>>\"));\r\n                    // ******** this is problematic *********\r\n                    rows.push(m.component(RowComponent, {\r\n                        key: 200, fullName: \"2nd\"\r\n                    }));\r\n                    rows.push(m(\"div\", \"<<<<<\"));\r\n                }\r\n\r\n                rows.push(m(\"div\", \"Last row\"));\r\n\r\n                var items = [];\r\n                items.push(m(\"div\", \"This is grid named \" + args.gridTitle + \". Rendered \" + counter.toString(10) + \" times.\"));\r\n                var allelements = items.concat(rows);\r\n                console.log(allelements);\r\n\r\n                return m(\"div\", allelements);\r\n            }\r\n        };\r\n\r\n        var mainGridComponent = m.component(GridComponent, { gridTitle: \"Toggler Test\" });\r\n\r\n        function rerender() {\r\n            m.render(document.getElementById(\"placeholder\"), mainGridComponent);\r\n        }\r\n    </script>\r\n\r\n    <div id=\"placeholder\" />\r\n\r\n    <script type=\"text/javascript\">\r\n        // Do the initial render.\r\n        rerender();\r\n    </script>\r\n"}}