commit 5130ce32a20566b5c6f96ff0f5154d7abd05629d
author Ben Rohlfs <brohlfs@google.com> Fri Jan 14 10:11:22 2022 +0000
committer Gerrit Code Review <noreply-gerritcodereview@google.com> Fri Jan 14 10:11:22 2022 +0000
tree 4cabae69b920313fcf70e143e681b2a6f5e2853f
parent ddab7e65bc27adc8b4b303190a37a63b7b3cbd6a
parent 2c944b3460235d4f1f19902797ee34401cb8c911

Merge "Fix scrolling comments into view"

polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
index ee40ad5..151556c 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
@@ -72,6 +72,7 @@
 import {notDeepEqual} from '../../../utils/deep-util';
 import {resolve} from '../../../models/dependency';
 import {commentsModelToken} from '../../../models/comments/comments-model';
+import {whenRendered} from '../../../utils/dom-util';
 
 const NEWLINE_PATTERN = /\n/g;
 
@@ -626,8 +627,11 @@
 
   override firstUpdated() {
     if (this.shouldScrollIntoView) {
-      this.commentBox?.focus();
-      this.scrollIntoView();
+      whenRendered(this, () => {
+        this.expandCollapseComments(false);
+        this.commentBox?.focus();
+        this.scrollIntoView({block: 'center'});
+      });
     }
   }
 

polygerrit-ui/app/utils/dom-util.ts

diff --git a/polygerrit-ui/app/utils/dom-util.ts b/polygerrit-ui/app/utils/dom-util.ts
index b96ebe6..34f0bc1 100644
--- a/polygerrit-ui/app/utils/dom-util.ts
+++ b/polygerrit-ui/app/utils/dom-util.ts
@@ -490,3 +490,18 @@
   }
   return false;
 }
+
+/** Executes the given callback when the element's height is > 0. */
+export function whenRendered(el: HTMLElement, callback: () => void) {
+  if (el.clientHeight > 0) {
+    callback();
+    return;
+  }
+  const obs = new ResizeObserver(() => {
+    if (el.clientHeight > 0) {
+      callback();
+      obs.unobserve(el);
+    }
+  });
+  obs.observe(el);
+}