Merge branch 'thread-focus' into 'develop'

Focus the active item in the thread

See merge request soapbox-pub/soapbox-fe!1379

app/soapbox/components/scrollable_list.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Virtuoso, Components } from 'react-virtuoso';
+import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle } from 'react-virtuoso';
 
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { useSettings } from 'soapbox/hooks';
@@ -25,7 +25,7 @@ const List: Components<Context>['List'] = React.forwardRef((props, ref) => {
   return <div ref={ref} className={context?.listClassName} {...rest} />;
 });
 
-interface IScrollableList {
+interface IScrollableList extends VirtuosoProps<any, any> {
   scrollKey?: string,
   onLoadMore?: () => void,
   isLoading?: boolean,
@@ -45,7 +45,7 @@ interface IScrollableList {
 }
 
 /** Legacy ScrollableList with Virtuoso for backwards-compatibility */
-const ScrollableList: React.FC<IScrollableList> = ({
+const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   prepend = null,
   alwaysPrepend,
   children,
@@ -61,7 +61,9 @@ const ScrollableList: React.FC<IScrollableList> = ({
   hasMore,
   placeholderComponent: Placeholder,
   placeholderCount = 0,
-}) => {
+  initialTopMostItemIndex = 0,
+  scrollerRef,
+}, ref) => {
   const settings = useSettings();
   const autoloadMore = settings.get('autoloadMore');
 
@@ -126,6 +128,7 @@ const ScrollableList: React.FC<IScrollableList> = ({
   /** Render the actual Virtuoso list */
   const renderFeed = (): JSX.Element => (
     <Virtuoso
+      ref={ref}
       useWindowScroll
       className={className}
       data={data}
@@ -133,6 +136,7 @@ const ScrollableList: React.FC<IScrollableList> = ({
       endReached={handleEndReached}
       isScrolling={isScrolling => isScrolling && onScroll && onScroll()}
       itemContent={renderItem}
+      initialTopMostItemIndex={showLoading ? 0 : initialTopMostItemIndex}
       context={{
         listClassName: className,
         itemClassName,
@@ -145,6 +149,7 @@ const ScrollableList: React.FC<IScrollableList> = ({
         Item,
         Footer: loadMore,
       }}
+      scrollerRef={scrollerRef}
     />
   );
 
@@ -162,6 +167,6 @@ const ScrollableList: React.FC<IScrollableList> = ({
       {renderBody()}
     </PullToRefresh>
   );
-};
+});
 
 export default ScrollableList;

app/soapbox/features/status/index.tsx

@@ -65,6 +65,7 @@ import ThreadStatus from './components/thread-status';
 
 import type { AxiosError } from 'axios';
 import type { History } from 'history';
+import type { VirtuosoHandle } from 'react-virtuoso';
 import type { AnyAction } from 'redux';
 import type { ThunkDispatch } from 'redux-thunk';
 import type { RootState } from 'soapbox/store';
@@ -210,6 +211,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
 
   node: HTMLDivElement | null = null;
   status: HTMLDivElement | null = null;
+  scroller: VirtuosoHandle | null = null;
   _scrolledIntoView: boolean = false;
 
   fetchData = async() => {
@@ -615,11 +617,10 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
   }
 
   componentDidUpdate(prevProps: IStatus, prevState: IStatusState) {
-    const { params, status, displayMedia } = this.props;
-    const { ancestorsIds } = prevProps;
+    const { params, status, displayMedia, ancestorsIds } = this.props;
+    const { isLoaded } = this.state;
 
     if (params.statusId !== prevProps.params.statusId) {
-      this._scrolledIntoView = false;
       this.fetchData();
     }
 
@@ -627,17 +628,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
       this.setState({ showMedia: defaultMediaVisibility(status, displayMedia), loadedStatusId: status.id });
     }
 
-    if (this._scrolledIntoView) {
-      return;
-    }
-
-    if (prevProps.status && ancestorsIds && ancestorsIds.size > 0 && this.node) {
-      const element = this.node.querySelector('.detailed-status');
-
-      window.requestAnimationFrame(() => {
-        element?.scrollIntoView(true);
+    if (params.statusId !== prevProps.params.statusId || status?.id !== prevProps.status?.id || ancestorsIds.size > prevProps.ancestorsIds.size || isLoaded !== prevState.isLoaded) {
+      this.scroller?.scrollToIndex({
+        index: this.props.ancestorsIds.size,
+        offset: -80,
       });
-      this._scrolledIntoView = true;
     }
   }
 
@@ -671,6 +666,10 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     }));
   }
 
+  setScrollerRef = (c: VirtuosoHandle) => {
+    this.scroller = c;
+  }
+
   render() {
     const { me, status, ancestorsIds, descendantsIds, intl } = this.props;
 
@@ -788,10 +787,12 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         <Stack space={2}>
           <div ref={this.setRef} className='thread'>
             <ScrollableList
+              ref={this.setScrollerRef}
               onRefresh={this.handleRefresh}
               hasMore={!!this.state.next}
               onLoadMore={this.handleLoadMore}
               placeholderComponent={() => <PlaceholderStatus thread />}
+              initialTopMostItemIndex={ancestorsIds.size}
             >
               {children}
             </ScrollableList>