diff --git a/app/javascript/mastodon/components/scrollable_list.jsx b/app/javascript/mastodon/components/scrollable_list.jsx index b2cb23617f7..36a36b3c87d 100644 --- a/app/javascript/mastodon/components/scrollable_list.jsx +++ b/app/javascript/mastodon/components/scrollable_list.jsx @@ -87,7 +87,7 @@ class ScrollableList extends PureComponent { }; intersectionObserverWrapper = new IntersectionObserverWrapper(); - firstSeenArticle = null; + articleOfInterest = null; scrollAdjustment = 0; handleScroll = throttle(() => { @@ -232,7 +232,7 @@ class ScrollableList extends PureComponent { }; preLoad = () => { - // Here we record the first visible article so that when we mouseUp on + // Here we record the article of interest so that when we mouseUp on // the LoadX element, were able to scroll back to it. // Note that it does not matter whether we are binding to the document, or @@ -242,27 +242,40 @@ class ScrollableList extends PureComponent { for (const article of articles) { const articleRect = article.getBoundingClientRect(); if (articleRect.top >= scrollableRect.top) { - this.firstSeenArticle = article; + this.articleOfInterest = article; break; } } } - returnToFirstArticle () { - const first = this.firstSeenArticle; - if (first === null) { + returnToArticleOfInterest () { + let article = this.articleOfInterest; + if (article === null) { return; } - // Scroll the firstSeenArticle back into view once we're done with + // Scroll the articleOfInterest back into view once we're done with // everything else. setTimeout(() => { + // We try to find the article previous to the article of interest in the + // list of articles. That's the article we finally want to focus on. + let prev = article.previousElementSibling; + while (prev !== null) { + if (prev.localName === "article") { + article = prev; + break; + } + + prev = prev.previousElementSibling; + } + + // We need to adjust with the scrollAdjustment. It is non-zero only when // we bind to the document. this.setScrollTop(this.getScrollTop() + - first.getBoundingClientRect().top - + article.getBoundingClientRect().top - this.scrollAdjustment); - first.querySelector("div.status__wrapper").focus(); + article.querySelector("div.status__wrapper").focus(); }, 0); } @@ -270,13 +283,13 @@ class ScrollableList extends PureComponent { handleLoadMore = e => { e.preventDefault(); this.props.onLoadMore(); - this.returnToFirstArticle(); + this.returnToArticleOfInterest(); }; handleLoadPending = e => { e.preventDefault(); this.props.onLoadPending(); - this.returnToFirstArticle(); + this.returnToArticleOfInterest(); }; render () {