From 364aced99ec94538b5a00fd96b1b3408e54e70f9 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Thu, 25 Sep 2025 18:14:49 +0200 Subject: [PATCH] [Glitch] Allow accessing ref of ScrollContainer's child Port 11bd51564898854c652451c9a28d8f73afc6a293 to glitch-soc Signed-off-by: Claire --- .../glitch/components/scrollable_list.jsx | 2 +- .../glitch/containers/scroll_container/index.tsx | 16 +++++++++++++++- .../flavours/glitch/features/status/index.jsx | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.jsx b/app/javascript/flavours/glitch/components/scrollable_list.jsx index d1a0ab991c..a7c1dccb0a 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.jsx +++ b/app/javascript/flavours/glitch/components/scrollable_list.jsx @@ -399,7 +399,7 @@ class ScrollableList extends PureComponent { if (trackScroll) { return ( - + {scrollableArea} ); diff --git a/app/javascript/flavours/glitch/containers/scroll_container/index.tsx b/app/javascript/flavours/glitch/containers/scroll_container/index.tsx index e7d2726715..0d0ab364dc 100644 --- a/app/javascript/flavours/glitch/containers/scroll_container/index.tsx +++ b/app/javascript/flavours/glitch/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; children: React.ReactElement; } @@ -23,12 +29,20 @@ interface ScrollContainerProps { export const ScrollContainer: React.FC = ({ children, scrollKey, + childRef, shouldUpdateScroll = defaultShouldUpdateScroll, }) => { const scrollBehaviorContext = useContext(ScrollBehaviorContext); const containerRef = useRef(); + /** + * 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 */ diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index a04fce60e4..d4dfe40747 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -634,7 +634,7 @@ class Status extends ImmutablePureComponent { )} /> - +
{ancestors}