From f6d4771c412d1a7912007c97562ed7e75e2eab1b Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 17 Nov 2017 11:01:39 -0800
Subject: [PATCH] Ensure re-sort/filter always happens after array item set.
 Fixes #3626

---
 lib/elements/dom-repeat.html | 20 +++++++++-----
 test/unit/dom-repeat.html    | 53 ++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/lib/elements/dom-repeat.html b/lib/elements/dom-repeat.html
index 9c0e601927..07c00cfe90 100644
--- 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
index 15e127776b..6b181d5dfc 100644
--- 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() {