Fix timeline jump when scrolling

Ref: tree-threading

2 files changed, 18 insertions, 4 deletions

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 9aa7b183..b9ebe7eb 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -469,7 +469,24 @@ const conversation = {
       } else {
         this.inlineDivePosition = id
       }
-      this.setHighlight(id)
+      // Because the conversation can be unmounted when out of sight
+      // and mounted again when it comes into sight,
+      // the `mounted` or `created` function in `status` should not
+      // contain scrolling calls, as we do not want the page to jump
+      // when we scroll with an expanded conversation.
+      //
+      // Now the method is to rely solely on the `highlight` watcher
+      // in `status` components.
+      // In linear views, all statuses are rendered at all times, but
+      // in tree views, it is possible that a change in active status
+      // removes and adds status components (e.g. an originally child
+      // status becomes an ancestor status, and thus they will be
+      // different).
+      // Here, let the components be rendered first, in order to trigger
+      // the `highlight` watcher.
+      this.$nextTick(() => {
+        this.setHighlight(id)
+      })
     },
     goToCurrent () {
       this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 73fad45f..7bdcb665 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -439,9 +439,6 @@ const Status = {
       }
     }
   },
-  mounted () {
-    this.scrollIfHighlighted(this.highlight)
-  },
   watch: {
     'highlight': function (id) {
       this.scrollIfHighlighted(id)