Ensure re-sort/filter always happens after array item set. Fixes #3626

Polymer · Nov 17, 2017 · f6d4771 · f6d4771
1 parent 4559830
commit f6d4771
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 7 deletions.
diff --git a/lib/elements/dom-repeat.html b/lib/elements/dom-repeat.html
@@ -456,13 +456,19 @@
     }
 
     __handleObservedPaths(path) {
-      if (this.__observePaths) {
-        path = path.substring(path.indexOf('.') + 1);
-        let paths = this.__observePaths;
-        for (let i=0; i<paths.length; i++) {
-          if (path.indexOf(paths[i]) === 0) {
-            this.__debounceRender(this.__render, this.delay);
-            return true;
+      // Handle cases where path changes should cause a re-sort/filter
+      if (this.__sortFn || this.__filterFn) {
+        if (!path) {
+          // Always re-render if the item iteself changed
+          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) {
+              this.__debounceRender(this.__render, this.delay);
+            }
           }
         }
       }

diff --git a/test/unit/dom-repeat.html b/test/unit/dom-repeat.html
@@ -464,6 +464,59 @@ <h4>x-repeat-chunked</h4>
         });
       });
 
+      test('item change refreshes sort and filter', function(done) {
+        // set filter fn
+        configured.$.repeater.sort = 'sortDesc';
+        configured.$.repeater.filter = 'filter2nd';
+        configured.$.repeater.render();
+        var stamped = configured.root.querySelectorAll('*:not(template):not(dom-repeat)');
+        assert.equal(stamped.length, 2 + 2*3 + 2*3*3, 'total stamped count incorrect');
+        assert.equal(stamped[0].itemaProp, 'prop-3');
+        assert.equal(stamped[0].indexa, 0);
+        assert.equal(stamped[13].itemaProp, 'prop-1');
+        assert.equal(stamped[13].indexa, 1);
+
+        // Update observed prop to be in filter (set new object)
+        configured.set(['items', 1], Object.assign({}, configured.items[1], {prop: 'prop-0'}));
+        // avoid imperative/synchronous refresh() since that forces a full refresh
+        setTimeout(function() {
+          stamped = configured.root.querySelectorAll('*:not(template):not(dom-repeat)');
+          assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
+          assert.equal(stamped[0].itemaProp, 'prop-3');
+          assert.equal(stamped[0].indexa, 0);
+          assert.equal(stamped[13].itemaProp, 'prop-1');
+          assert.equal(stamped[13].indexa, 1);
+          assert.equal(stamped[26].itemaProp, 'prop-0');
+          assert.equal(stamped[26].indexa, 2);
+
+          // Update observed prop back to be out of the filter (set new object)
+          configured.set(['items', 1], Object.assign({}, configured.items[1], {prop: 'prop-2'}));
+          setTimeout(function() {
+            var stamped = configured.root.querySelectorAll('*:not(template):not(dom-repeat)');
+            assert.equal(stamped.length, 2 + 2*3 + 2*3*3, 'total stamped count incorrect');
+            assert.equal(stamped[0].itemaProp, 'prop-3');
+            assert.equal(stamped[0].indexa, 0);
+            assert.equal(stamped[13].itemaProp, 'prop-1');
+            assert.equal(stamped[13].indexa, 1);
+
+            // reset filter fn
+            configured.$.repeater.sort = null;
+            configured.$.repeater.filter = null;
+            configured.$.repeater.render();
+            stamped = configured.root.querySelectorAll('*:not(template):not(dom-repeat)');
+            assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
+            assert.equal(stamped[0].itemaProp, 'prop-1');
+            assert.equal(stamped[0].indexa, 0);
+            assert.equal(stamped[13].itemaProp, 'prop-2');
+            assert.equal(stamped[13].indexa, 1);
+            assert.equal(stamped[26].itemaProp, 'prop-3');
+            assert.equal(stamped[26].indexa, 2);
+
+            done();
+          });
+        });
+      });
+
     });
 
     suite('nested un-configured dom-repeat in document', function() {