Fixes #3321. Only let dom-repeat insert elements in attached if it ha…

…s been previously detached; correctly avoid re-adding children in document fragments to an element's logical linked list if they are already there.
Polymer · Jan 23, 2016 · 9f2464d · 9f2464d
1 parent 55b91b3
commit 9f2464d
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 4 deletions.
diff --git a/src/lib/dom-tree-api.html b/src/lib/dom-tree-api.html
@@ -195,7 +195,11 @@
         // the act of setting this info can affect patched nodes
         // getters; therefore capture childNodes before patching.
         for (var n=node.firstChild; n; n=n.nextSibling) {
-          this._linkNode(n, container, ref_node);  
+          // only link in the child iff it's not already in the container's
+          // logical tree.
+          if (this.getParentNode(n) !== container) {
+            this._linkNode(n, container, ref_node);
+          }
         }
       } else {
         this._linkNode(node, container, ref_node);

diff --git a/src/lib/template/dom-repeat.html b/src/lib/template/dom-repeat.html
@@ -254,15 +254,20 @@
     },
 
     detached: function() {
+      this.__isDetached = true;
       for (var i=0; i<this._instances.length; i++) {
         this._detachInstance(i);
       }
     },
 
     attached: function() {
-      var parent = Polymer.dom(Polymer.dom(this).parentNode);
-      for (var i=0; i<this._instances.length; i++) {
-        this._attachInstance(i, parent);
+      // only perform attachment if the element was previously detached.
+      if (this.__isDetached) {
+        this.__isDetached = false;
+        var parent = Polymer.dom(Polymer.dom(this).parentNode);
+        for (var i=0; i<this._instances.length; i++) {
+          this._attachInstance(i, parent);
+        }
       }
     },
 

diff --git a/test/smoke/distribute-dom-repeat.html b/test/smoke/distribute-dom-repeat.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>distribute dom-repeat</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+
+
+  <dom-module id="x-container">
+    <template>
+      <content select="*"></content>
+    </template>
+    <script>
+      Polymer({
+        is: 'x-container'
+      })
+    </script>
+  </dom-module>
+
+
+  <dom-module id="x-test">
+    <template strip-whitespace>
+      <x-container id="container">
+        <template class="foo" id="nug" is="dom-repeat" items="{{model}}">
+          <div class="foo">{{item.id}}</div>
+        </template>
+      </x-container>
+    </template>
+    <script>
+      Polymer({
+        is: 'x-test',
+
+        ready: function() {
+          this.model = [
+            {id: '1', text: 'How much do you like food?'},
+            {id: '2', text: 'Where do you buy your groceries?'},
+            {id: '3', text: 'What is your favourite colour?'}
+          ];
+          Polymer.dom.flush();
+          var self = this;
+          console.log(Polymer.dom(self.$.container).firstElementChild);
+          setTimeout(function() {
+            console.log('***');
+            console.log(Polymer.dom(self.$.container).firstElementChild);
+          }, 100);
+        }
+      })
+    </script>
+    </dom-module>
+
+  <x-test></x-test>
+
+</body>
+</html>
diff --git a/test/unit/polymer-dom-content.html b/test/unit/polymer-dom-content.html
@@ -40,6 +40,11 @@
   </script>
 </dom-module>
 
+<dom-module id="x-dist-star">
+  <template><content select="*"></content></template>
+  <script>Polymer({is: 'x-dist-star'});</script>
+</dom-module>
+
 <dom-module id="x-dist-inside-deep-tree">
   <template>
     x-dist-inside-deep-tree
@@ -243,6 +248,31 @@
   </script>
 </dom-module>
 
+<dom-module id="x-repeat2">
+  <template>
+    <x-dist-star id="dist">
+      <template is="dom-repeat" items="{{items}}">
+        <div>{{item}}</div>
+      </template>
+    </x-dist-star>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-repeat2',
+      properties: {
+        items: {
+          type: Array,
+          value: ["ITEM1", "ITEM2", "ITEM3"]
+        }
+      }
+    });
+  });
+  </script>
+</dom-module>
+
+<x-repeat2 id="repeat2"></x-repeat2>
+
 <x-compose-lazy-no-dist><span>Child</span></x-compose-lazy-no-dist>
 
 
@@ -1396,8 +1426,23 @@
       Polymer.dom(document.body).removeChild(div);
     });
 
+    test('dom-repeat that distributes inside a select=* container', function(done) {
+      var x1 = document.querySelector('#repeat2');
+      Polymer.dom.flush();
+      // async due to attachment.
+      setTimeout(function() {
+        assert.equal(Polymer.dom(x1.$.dist).children.length, 4);
+        if (x1.$.dist.shadyRoot) {
+          assert.equal(x1.$.dist.children.length, 4);
+        }
+        done();
+      });
+    });
+
   });
 
+
+
   suite('multi-content mutations', function() {
 
     test('remove, append first content', function() {