diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index 266c974c4e..605919f670 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -610,7 +610,7 @@ class Status extends ImmutablePureComponent { this.setState({ isExpanded: value }); }; - setRef = c => { + setContainerRef = c => { this.node = c; }; @@ -618,12 +618,16 @@ class Status extends ImmutablePureComponent { this.column = c; }; + setStatusRef = c => { + this.statusNode = c; + }; + _scrollStatusIntoView () { const { status, multiColumn } = this.props; if (status) { - window.requestAnimationFrame(() => { - this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true); + requestIdleCallback(() => { + this.statusNode?.scrollIntoView(true); // In the single-column interface, `scrollIntoView` will put the post behind the header, // so compensate for that. @@ -661,9 +665,8 @@ class Status extends ImmutablePureComponent { } // Scroll to focused post if it is loaded - const child = this.node?.querySelector('.detailed-status__wrapper'); - if (child) { - return [0, child.offsetTop]; + if (this.statusNode) { + return [0, this.statusNode.offsetTop]; } // Do not scroll otherwise, `componentDidUpdate` will take care of that @@ -730,11 +733,11 @@ class Status extends ImmutablePureComponent { /> -
+
{ancestors} -
+