Allow accessing ref of ScrollContainer's child (mastodon#36265)

Author: diondiondion

app/javascript/mastodon/components/scrollable_list.jsx

@@ -399,7 +399,7 @@ class ScrollableList extends PureComponent {
 
     if (trackScroll) {
       return (
-        <ScrollContainer scrollKey={scrollKey}>
+        <ScrollContainer scrollKey={scrollKey} childRef={this.setRef}>
           {scrollableArea}
         </ScrollContainer>
       );

app/javascript/mastodon/containers/scroll_container/index.tsx

@@ -1,4 +1,9 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import { defaultShouldUpdateScroll } from './default_should_update_scroll';
 import type { ShouldUpdateScrollFn } from './default_should_update_scroll';
@@ -11,6 +16,7 @@ interface ScrollContainerProps {
    */
   scrollKey: string;
   shouldUpdateScroll?: ShouldUpdateScrollFn;
+  childRef?: React.ForwardedRef<HTMLElement | undefined>;
   children: React.ReactElement;
 }
 
@@ -23,12 +29,20 @@ interface ScrollContainerProps {
 export const ScrollContainer: React.FC<ScrollContainerProps> = ({
   children,
   scrollKey,
+  childRef,
   shouldUpdateScroll = defaultShouldUpdateScroll,
 }) => {
   const scrollBehaviorContext = useContext(ScrollBehaviorContext);
 
   const containerRef = useRef<HTMLElement>();
 
+  /**
+   * If a childRef is passed, sync it with the containerRef. This
+   * is necessary because in this component's return statement,
+   * we're overwriting the immediate child component's ref prop.
+   */
+  useImperativeHandle(childRef, () => containerRef.current, []);
+
   /**
    * Register/unregister scrollable element with ScrollBehavior
    */

app/javascript/mastodon/features/status/index.jsx

@@ -602,7 +602,7 @@ class Status extends ImmutablePureComponent {
           )}
         />
 
-        <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll}>
+        <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll} childRef={this.setContainerRef}>
           <div className={classNames('scrollable item-list', { fullscreen })} ref={this.setContainerRef}>
             {ancestors}