Fix incorrect path modification in dom-repeat __handleObservedPaths() (…

…#4983) (#5048)
Polymer · Jan 23, 2018 · 4b58f54 · 4b58f54
1 parent 6c5aac0
commit 4b58f54
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 1 deletion.
diff --git a/lib/elements/dom-repeat.html b/lib/elements/dom-repeat.html
@@ -473,7 +473,6 @@
           this.__debounceRender(this.__render, this.delay);
         } else if (this.__observePaths) {
           // Otherwise, re-render if the path changed matches an observed path
-          path = path.substring(path.indexOf('.') + 1);
           let paths = this.__observePaths;
           for (let i=0; i<paths.length; i++) {
             if (path.indexOf(paths[i]) === 0) {

diff --git a/test/unit/dom-repeat-elements.html b/test/unit/dom-repeat-elements.html
@@ -367,6 +367,32 @@
   });
 </script>
 
+<dom-module id="x-repeat-filter-and-sort-by-nested-property">
+    <template>
+      <template id="repeater" is="dom-repeat" items="{{items}}">
+        <x-foo itema-prop="{{item.prop.nestedProp}}"></x-foo>
+      </template>
+    </template>
+    <script>
+    Polymer({
+      is: 'x-repeat-filter-and-sort-by-nested-property',
+      properties: {
+        items: {
+          value () {
+            return [
+              { prop: { nestedProp: 0 } },
+              { prop: { nestedProp: 1 } },
+              { prop: { nestedProp: 2 } },
+              { prop: { nestedProp: 3 } },
+              { prop: { nestedProp: 4 } },
+            ];
+          }
+        }
+      }
+    });
+    </script>
+  </dom-module>
+
 
 <dom-module id="x-simple-repeat">
   <template>

diff --git a/test/unit/dom-repeat.html b/test/unit/dom-repeat.html
@@ -43,6 +43,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="filter-and-sort-by-nested-property">
+    <template>
+      <x-repeat-filter-and-sort-by-nested-property></x-repeat-filter-and-sort-by-nested-property>
+    </template>
+  </test-fixture>
+
   <test-fixture id="unconfigured">
     <template>
       <dom-bind>
@@ -516,7 +522,50 @@ <h4>x-repeat-chunked</h4>
           });
         });
       });
+    });
 
+    suite('filter and sort by nested property', function () {
+      let fixtureInstance;
+
+      setup(function() {
+        fixtureInstance = fixture('filter-and-sort-by-nested-property');
+        Polymer.flush();
+      });
+
+      test('change of item nested-property refreshes sort and filter', function(done) {
+        // Original values for `item.prop.nestedProp` are numbers 0 through 4
+        const repeater = fixtureInstance.$.repeater;
+        repeater.sort = (a, b) => b.prop.nestedProp - a.prop.nestedProp; // Desc order
+        repeater.filter = (a) => a.prop.nestedProp >= 1; // => Just 1 through 4
+        repeater.observe = 'prop.nestedProp';
+        repeater.render();
+
+        const stamped = fixtureInstance.root.querySelectorAll('*:not(template):not(dom-repeat)');
+        assert.equal(stamped.length, 4, 'total stamped count incorrect');
+        assert.equal(stamped[0].itemaProp, 4);
+        assert.equal(stamped[1].itemaProp, 3);
+        assert.equal(stamped[2].itemaProp, 2);
+        assert.equal(stamped[3].itemaProp, 1);
+
+        // Update observed nested prop
+        for (let i = 0; i < 5; i++) {
+          const x = fixtureInstance.get(['items', i, 'prop', 'nestedProp']);
+          fixtureInstance.set(['items', i, 'prop', 'nestedProp'], (x + 10) * 2);
+        }
+
+        // Wait for changes to be reflected to the DOM
+        setTimeout(function() {
+          const stamped = fixtureInstance.root.querySelectorAll('*:not(template):not(dom-repeat)');
+          assert.equal(stamped.length, 5, 'total stamped count incorrect');
+          assert.equal(stamped[0].itemaProp, 28);
+          assert.equal(stamped[1].itemaProp, 26);
+          assert.equal(stamped[2].itemaProp, 24);
+          assert.equal(stamped[3].itemaProp, 22);
+          assert.equal(stamped[4].itemaProp, 20);
+
+          done();
+        });
+      });
     });
 
     suite('nested un-configured dom-repeat in document', function() {