regression: solve restore position on same room types

apps/meteor/client/hooks/useMergedRefsV2.ts

@@ -0,0 +1,30 @@
+import type { MutableRefObject, Ref, RefCallback } from 'react';
+import { useCallback } from 'react';
+
+const isRefCallback = <T>(x: unknown): x is RefCallback<T> => typeof x === 'function';
+const isMutableRefObject = <T>(x: unknown): x is MutableRefObject<T> => typeof x === 'object';
+
+export const setRef = <T>(ref: Ref<T> | undefined, refValue: T) => {
+	if (isRefCallback<T>(ref)) {
+		ref(refValue);
+		return;
+	}
+
+	if (isMutableRefObject<T>(ref)) {
+		ref.current = refValue;
+	}
+};
+
+// TODO: backport to fuselage-hooks
+/**
+ * Merges multiple refs into a single ref callback
+ *
+ * @param refs The refs to merge.
+ * @returns The merged ref callback.
+ */
+export const useMergedRefsV2 = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> => {
+	return useCallback((refValue: T) => {
+		refs.forEach((ref) => setRef(ref, refValue));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, refs);
+};

apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts

@@ -22,9 +22,11 @@ export const useJumpToMessageImperative = () => {
 		if (!jumpToRef.current || !containerRef.current) {
 			return;
 		}
-		jumpToRef.current.scrollIntoView({
-			block: 'center',
-		});
+
+		// calculate the scroll position to center the message
+		// avoiding scrollIntoView because it will can scroll parent elements
+		containerRef.current.scrollTop =
+			jumpToRef.current.offsetTop - containerRef.current.clientHeight / 2 + jumpToRef.current.offsetHeight / 2;
 	}, []);
 
 	return {

apps/meteor/client/views/room/body/RoomBody.tsx

@@ -1,5 +1,4 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { usePermission, useRole, useSetting, useTranslation, useUser, useUserPreference } from '@rocket.chat/ui-contexts';
 import type { MouseEvent, ReactElement } from 'react';
 import { memo, useCallback, useMemo } from 'react';
@@ -16,6 +15,7 @@ import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
 import { isTruthy } from '../../../../lib/isTruthy';
 import { CustomScrollbars } from '../../../components/CustomScrollbars';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
+import { useMergedRefsV2 } from '../../../hooks/useMergedRefsV2';
 import { BubbleDate } from '../BubbleDate';
 import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary';
 import RoomAnnouncement from '../RoomAnnouncement';
@@ -110,7 +110,7 @@ const RoomBody = (): ReactElement => {
 
 	const { innerRef: restoreScrollPositionInnerRef, jumpToRef: jumpToRefRestoreScrollPosition } = useRestoreScrollPosition(room._id);
 
-	const jumpToRef = useMergedRefs(
+	const jumpToRef = useMergedRefsV2(
 		jumpToRefGetMore,
 		jumpToRefIsAtBottom,
 		jumpToRefRestoreScrollPosition,
@@ -135,7 +135,7 @@ const RoomBody = (): ReactElement => {
 			isAtBottom,
 		});
 
-	const innerRef = useMergedRefs(
+	const innerRef = useMergedRefsV2(
 		dateScrollInnerRef,
 		restoreScrollPositionInnerRef,
 		isAtBottomInnerRef,
@@ -147,7 +147,7 @@ const RoomBody = (): ReactElement => {
 		jumpToRefGetMoreImperativeInnerRef,
 	);
 
-	const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef);
+	const wrapperBoxRefs = useMergedRefsV2(unreadBarWrapperRef);
 
 	const handleNavigateToPreviousMessage = useCallback((): void => {
 		chat.messageEditing.toPreviousMessage();

apps/meteor/client/views/room/body/RoomBodyV2.tsx

@@ -1,12 +1,12 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { usePermission, useRole, useSetting, useTranslation, useUser, useUserPreference } from '@rocket.chat/ui-contexts';
 import type { MouseEvent, ReactElement } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 
 import { isTruthy } from '../../../../lib/isTruthy';
 import { CustomScrollbars } from '../../../components/CustomScrollbars';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
+import { useMergedRefsV2 } from '../../../hooks/useMergedRefsV2';
 import { BubbleDate } from '../BubbleDate';
 import { MessageList } from '../MessageList';
 import DropTargetOverlay from './DropTargetOverlay';
@@ -110,7 +110,7 @@ const RoomBody = (): ReactElement => {
 
 	const { innerRef: restoreScrollPositionInnerRef, jumpToRef: jumpToRefRestoreScrollPosition } = useRestoreScrollPosition(room._id);
 
-	const jumpToRef = useMergedRefs(
+	const jumpToRef = useMergedRefsV2(
 		jumpToRefIsAtBottom,
 		jumpToRefGetMore,
 		jumpToRefRestoreScrollPosition,
@@ -135,7 +135,7 @@ const RoomBody = (): ReactElement => {
 			isAtBottom,
 		});
 
-	const innerRef = useMergedRefs(
+	const innerRef = useMergedRefsV2(
 		dateScrollInnerRef,
 		restoreScrollPositionInnerRef,
 		isAtBottomInnerRef,

apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts

@@ -19,10 +19,12 @@ export function useRestoreScrollPosition(rid: string, wait = 100) {
 					node.scrollLeft = 30;
 				}
 				const handleWrapperScroll = withThrottling({ wait })((event) => {
+					const store = RoomManager.getStore(rid);
 					store?.update({ scroll: event.target.scrollTop, atBottom: isAtBottom(event.target, 50) });
 				});
 				node.addEventListener('scroll', handleWrapperScroll, { passive: true });
 				return () => {
+					handleWrapperScroll.cancel();
 					node.removeEventListener('scroll', handleWrapperScroll);
 				};
 			},