Merge pull request #900 from marko-js/issue-899

Fixes #899 - Repeated elements with no assigned key are not added to lookup when rendered on the server
marko-js · Oct 19, 2017 · 345b47a · 345b47a
2 parents e9db1d6 + 9208d8d
commit 345b47a
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 6 deletions.
diff --git a/src/morphdom/index.js b/src/morphdom/index.js
@@ -278,7 +278,7 @@ function morphdom(
 
 
                         if (compareNodeNames(curToNodeChild, curVFromNodeChild)) {
-                            morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, componentForNode);
+                            morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, componentForNode, curToNodeKey);
                         } else {
                             // Remove the old node
                             detachNode(curFromNodeChild, parentFromNode, componentForNode);
@@ -294,7 +294,7 @@ function morphdom(
                                 curFromNodeChild.nodeName === curToNodeChild.___nodeName) {
                             curVFromNodeChild = virtualizeElement(curFromNodeChild);
                             curFromNodeChild.___markoKey = curToNodeKey;
-                            morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, componentForNode);
+                            morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, componentForNode, curToNodeKey);
                             curToNodeChild = toNextSibling;
                             curFromNodeChild = fromNextSibling;
                             continue;
@@ -358,7 +358,7 @@ function morphdom(
                             }
 
                             if ((curToNodeChild.___flags & FLAG_PRESERVE) === 0) {
-                                morphEl(matchingFromEl, curVFromNodeChild, curToNodeChild, componentForNode);
+                                morphEl(matchingFromEl, curVFromNodeChild, curToNodeChild, componentForNode, curToNodeKey, curToNodeKey);
                             }
 
 
@@ -424,7 +424,7 @@ function morphdom(
                             // We found compatible DOM elements so transform
                             // the current "from" node to match the current
                             // target DOM node.
-                            morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, component);
+                            morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, component, curToNodeKey);
                         }
 
                     } else if (curFromNodeType === TEXT_NODE || curFromNodeType === COMMENT_NODE) {
@@ -485,8 +485,7 @@ function morphdom(
         }
     }
 
-    function morphEl(fromEl, vFromEl, toEl, component) {
-        var toElKey = toEl.___key;
+    function morphEl(fromEl, vFromEl, toEl, component, toElKey) {
         var nodeName = toEl.___nodeName;
 
         if (isRerenderInBrowser === true && toElKey) {

diff --git a/.../autotests/components-pages/repeated-list-items-unkeyed/components/list-items/index.marko b/.../autotests/components-pages/repeated-list-items-unkeyed/components/list-items/index.marko
@@ -0,0 +1,11 @@
+class {
+    onMount() {
+        window.listItemsComponent = this;
+    }
+}
+
+<ul key="root">
+	<li for(option in input.options)>
+		<a>${option}</a>
+	</li>
+</ul>
diff --git a/test/autotests/components-pages/repeated-list-items-unkeyed/template.marko b/test/autotests/components-pages/repeated-list-items-unkeyed/template.marko
@@ -0,0 +1,28 @@
+lasso-page dependencies=input.browserDependencies lasso=input.lasso
+
+<!DOCTYPE html>
+html lang="en"
+    head
+        meta charset="UTF-8"
+        title -- Marko Test
+        lasso-head
+    body
+
+        div id="test"
+        div id="mocha"
+        div id="testsTarget"
+
+        <list-items options=[
+                'apples',
+                'bananas',
+                'cherries',
+                'dates'
+            ]/>
+
+        lasso-body
+
+        init-components immediate
+
+        lasso-slot name="mocha-run"
+
+        browser-refresh
diff --git a/test/autotests/components-pages/repeated-list-items-unkeyed/tests.js b/test/autotests/components-pages/repeated-list-items-unkeyed/tests.js
@@ -0,0 +1,49 @@
+var path = require('path');
+var expect = require('chai').expect;
+
+describe(path.basename(__dirname), function() {
+    it('should update correctly', function() {
+        var listItemsComponent = window.listItemsComponent;
+        expect(listItemsComponent.getEl('root').querySelectorAll('li').length).to.equal(4);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a').length).to.equal(4);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[0].innerHTML).to.equal('apples');
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[1].innerHTML).to.equal('bananas');
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[2].innerHTML).to.equal('cherries');
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[3].innerHTML).to.equal('dates');
+
+        listItemsComponent.input = {
+            options: [
+                    'apples',
+                    'bananas'
+                ]
+        };
+        listItemsComponent.update();
+
+        expect(listItemsComponent.getEl('root').querySelectorAll('li').length).to.equal(2);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a').length).to.equal(2);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[0].innerHTML).to.equal('apples');
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[1].innerHTML).to.equal('bananas');
+
+        listItemsComponent.input = {
+            options: []
+        };
+        listItemsComponent.update();
+
+        expect(listItemsComponent.getEl('root').querySelectorAll('li').length).to.equal(0);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a').length).to.equal(0);
+
+
+        listItemsComponent.input = {
+            options: [
+                    'apples',
+                    'bananas'
+                ]
+        };
+        listItemsComponent.update();
+
+        expect(listItemsComponent.getEl('root').querySelectorAll('li').length).to.equal(2);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a').length).to.equal(2);
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[0].innerHTML).to.equal('apples');
+        expect(listItemsComponent.getEl('root').querySelectorAll('a')[1].innerHTML).to.equal('bananas');
+    });
+});