diff --git a/.changeset/strange-stingrays-live.md b/.changeset/strange-stingrays-live.md new file mode 100644 index 0000000000000..2c1e59661c42a --- /dev/null +++ b/.changeset/strange-stingrays-live.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Fixes scroll issue when moving between channels or DMs diff --git a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.tsx b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.tsx index fbf95db89753a..9f0bdbbe98b13 100644 --- a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.tsx +++ b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.tsx @@ -36,6 +36,30 @@ describe('useRestoreScrollPosition', () => { expect(screen.getByTestId('scrollable-element')).toHaveProperty('scrollTop', 123); }); + it('should jump to bottom if atBottom is true', () => { + const store = { + scroll: 123, + atBottom: true, + update: jest.fn(), + }; + (RoomManager.getStore as jest.Mock).mockReturnValue(store); + + const Test = () => { + const { innerRef } = useRestoreScrollPosition('GENERAL'); + return ( +
+
+
+ ); + }; + + render(); + + expect(screen.getByTestId('scrollable-element')).toBeInTheDocument(); + expect(screen.getByTestId('scrollable-element')).toHaveStyle({ height: '100px', overflowY: 'scroll' }); + expect(screen.getByTestId('scrollable-element')).toHaveProperty('scrollTop', 0); + }); + it('should do nothing if no previous scroll position is stored', () => { const store = { scroll: undefined, diff --git a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts index a95cbce9f3f9f..b3e0c968d0ffb 100644 --- a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts +++ b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts @@ -14,6 +14,10 @@ export function useRestoreScrollPosition(rid: string, wait = 100) { return; } const store = RoomManager.getStore(rid); + if (store?.atBottom) { + node.scrollTop = node.scrollHeight; + node.scrollLeft = 30; + } if (!jumpToRef.current && store?.scroll !== undefined && !store.atBottom) { node.scrollTop = store.scroll; node.scrollLeft = 30;