diff --git a/.changeset/pretty-dots-leave.md b/.changeset/pretty-dots-leave.md new file mode 100644 index 000000000000..03df3f6ce073 --- /dev/null +++ b/.changeset/pretty-dots-leave.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': minor +--- + +fix: Room history scrollbar position diff --git a/apps/meteor/client/views/room/components/body/RoomBody.tsx b/apps/meteor/client/views/room/components/body/RoomBody.tsx index 2859395ac2cc..8f839ef492a1 100644 --- a/apps/meteor/client/views/room/components/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/components/body/RoomBody.tsx @@ -45,6 +45,7 @@ import UploadProgressIndicator from './UploadProgressIndicator'; import ComposerContainer from './composer/ComposerContainer'; import { useFileUploadDropTarget } from './hooks/useFileUploadDropTarget'; import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; +import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition'; import { useRetentionPolicy } from './hooks/useRetentionPolicy'; import { useUnreadMessages } from './hooks/useUnreadMessages'; @@ -403,10 +404,10 @@ const RoomBody = (): ReactElement => { sendToBottom(); } wrapper.removeEventListener('MessageGroup', afterMessageGroup); - - wrapper.addEventListener('scroll', handleWrapperScroll); }; + wrapper.addEventListener('scroll', handleWrapperScroll); + wrapper.addEventListener('MessageGroup', afterMessageGroup); return () => { @@ -415,6 +416,8 @@ const RoomBody = (): ReactElement => { }; }, [room._id, sendToBottom]); + useRestoreScrollPosition(room._id, scrollMessageList, sendToBottom); + useEffect(() => { const wrapper = wrapperRef.current; diff --git a/apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts b/apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts new file mode 100644 index 000000000000..c36a1da58005 --- /dev/null +++ b/apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts @@ -0,0 +1,23 @@ +import type { IRoom } from '@rocket.chat/core-typings'; +import { useEffect } from 'react'; + +import type { MessageListContextValue } from '../../../../../components/message/list/MessageListContext'; +import { RoomManager } from '../../../../../lib/RoomManager'; + +export function useRestoreScrollPosition( + roomId: IRoom['_id'], + scrollMessageList: Exclude, + sendToBottom: () => void, +) { + useEffect(() => { + const store = RoomManager.getStore(roomId); + + if (store?.scroll && !store.atBottom) { + scrollMessageList(() => { + return { left: 30, top: store.scroll }; + }); + } else { + sendToBottom(); + } + }, [roomId, scrollMessageList, sendToBottom]); +}