diff --git a/.changeset/lucky-birds-lie.md b/.changeset/lucky-birds-lie.md new file mode 100644 index 0000000000000..a1d7a0db6a0ee --- /dev/null +++ b/.changeset/lucky-birds-lie.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixes an issue which caused some weird scrolling in rooms when using secondary sidepanel navigation. diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index fea824e3537d2..f2ebae6959c36 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -114,7 +114,7 @@ const RoomBody = (): ReactElement => { targeDrop: [fileUploadTriggerProps, fileUploadOverlayProps], } = useFileUpload(); - const { innerRef: restoreScrollPositionInnerRef } = useRestoreScrollPosition(room._id); + const { innerRef: restoreScrollPositionInnerRef } = useRestoreScrollPosition(); const { messageListRef } = useMessageListNavigation(); const { innerRef: selectAndScrollRef, selectAllAndScrollToTop } = useSelectAllAndScrollToTop(); diff --git a/apps/meteor/client/views/room/body/RoomBodyV2.tsx b/apps/meteor/client/views/room/body/RoomBodyV2.tsx index 273151a76ef3e..6212f96ec6bca 100644 --- a/apps/meteor/client/views/room/body/RoomBodyV2.tsx +++ b/apps/meteor/client/views/room/body/RoomBodyV2.tsx @@ -109,7 +109,7 @@ const RoomBody = (): ReactElement => { targeDrop: [fileUploadTriggerProps, fileUploadOverlayProps], } = useFileUpload(); - const { innerRef: restoreScrollPositionInnerRef } = useRestoreScrollPosition(room._id); + const { innerRef: restoreScrollPositionInnerRef } = useRestoreScrollPosition(); const { messageListRef } = useMessageListNavigation(); const { innerRef: selectAndScrollRef, selectAllAndScrollToTop } = useSelectAllAndScrollToTop(); diff --git a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.ts b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.ts index 8ae9a5134536d..5444ac71e9818 100644 --- a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.ts +++ b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.spec.ts @@ -8,6 +8,8 @@ jest.mock('../../../../lib/RoomManager', () => ({ RoomManager: { getStore: jest.fn(), }, + useOpenedRoom: jest.fn(() => 'room-id'), + useSecondLevelOpenedRoom: jest.fn(() => 'room-id'), })); describe('useRestoreScrollPosition', () => { @@ -21,7 +23,7 @@ describe('useRestoreScrollPosition', () => { const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: mockElement }); - const { unmount } = renderHook(() => useRestoreScrollPosition('room-id')); + const { unmount } = renderHook(() => useRestoreScrollPosition()); expect(useRefSpy).toHaveBeenCalledWith(null); expect(mockElement).toHaveProperty('scrollTop', 100); @@ -42,7 +44,7 @@ describe('useRestoreScrollPosition', () => { const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: mockElement }); - const { unmount } = renderHook(() => useRestoreScrollPosition('room-id')); + const { unmount } = renderHook(() => useRestoreScrollPosition()); expect(useRefSpy).toHaveBeenCalledWith(null); expect(mockElement).toHaveProperty('scrollTop', 800); @@ -71,7 +73,7 @@ describe('useRestoreScrollPosition', () => { const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: mockElement }); - const { unmount } = renderHook(() => useRestoreScrollPosition('room-id')); + const { unmount } = renderHook(() => useRestoreScrollPosition()); expect(useRefSpy).toHaveBeenCalledWith(null); expect(update).toHaveBeenCalledWith({ scroll: 500, atBottom: false }); diff --git a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts index 2876e781a5707..77c03bbed39c9 100644 --- a/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts +++ b/apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts @@ -1,15 +1,16 @@ -import type { IRoom } from '@rocket.chat/core-typings'; import { useCallback, useEffect, useRef } from 'react'; import { isAtBottom } from '../../../../../app/ui/client/views/app/lib/scrolling'; import { withThrottling } from '../../../../../lib/utils/highOrderFunctions'; -import { RoomManager } from '../../../../lib/RoomManager'; +import { RoomManager, useOpenedRoom, useSecondLevelOpenedRoom } from '../../../../lib/RoomManager'; -export function useRestoreScrollPosition(roomId: IRoom['_id']) { +export function useRestoreScrollPosition() { const ref = useRef(null); + const parentRoomId = useOpenedRoom(); + const roomId = useSecondLevelOpenedRoom() ?? parentRoomId; const handleRestoreScroll = useCallback(() => { - if (!ref.current) { + if (!ref.current || !roomId) { return; } @@ -24,7 +25,7 @@ export function useRestoreScrollPosition(roomId: IRoom['_id']) { }, [roomId]); useEffect(() => { - if (!ref.current) { + if (!ref.current || !roomId) { return; }