Skip to content

Commit c862926

Browse files
authored
regression: Wrong scrollbar being used with virtuoso (#35550)
1 parent 4ce0038 commit c862926

File tree

5 files changed

+70
-12
lines changed

5 files changed

+70
-12
lines changed

apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import RoomSidepanelListWrapper from './RoomSidepanelListWrapper';
88
import RoomSidepanelLoading from './RoomSidepanelLoading';
99
import RoomSidepanelItem from './SidepanelItem';
1010
import { useTeamsListChildrenUpdate } from './hooks/useTeamslistChildren';
11-
import { CustomScrollbars } from '../../../components/CustomScrollbars';
11+
import { VirtualizedScrollbars } from '../../../components/CustomScrollbars';
1212
import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint';
1313
import { useOpenedRoom, useSecondLevelOpenedRoom } from '../../../lib/RoomManager';
1414

@@ -50,7 +50,7 @@ const RoomSidepanelWithData = ({ parentRid, openedRoom }: { parentRid: string; o
5050
return (
5151
<Sidepanel>
5252
<Box pb={8} h='full'>
53-
<CustomScrollbars>
53+
<VirtualizedScrollbars>
5454
<Virtuoso
5555
totalCount={result.data.length}
5656
data={result.data}
@@ -59,7 +59,7 @@ const RoomSidepanelWithData = ({ parentRid, openedRoom }: { parentRid: string; o
5959
<RoomSidepanelItem openedRoom={openedRoom} room={data} parentRid={parentRid} viewMode={sidebarViewMode} />
6060
)}
6161
/>
62-
</CustomScrollbars>
62+
</VirtualizedScrollbars>
6363
</Box>
6464
</Sidepanel>
6565
);

apps/meteor/client/views/room/contextualBar/MessageListTab.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
ContextualbarClose,
1818
ContextualbarEmptyContent,
1919
} from '../../../components/Contextualbar';
20-
import { CustomScrollbars } from '../../../components/CustomScrollbars';
20+
import { VirtualizedScrollbars } from '../../../components/CustomScrollbars';
2121
import RoomMessage from '../../../components/message/variants/RoomMessage';
2222
import SystemMessage from '../../../components/message/variants/SystemMessage';
2323
import { useFormatDate } from '../../../hooks/useFormatDate';
@@ -67,7 +67,7 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes
6767
<MessageListErrorBoundary>
6868
<MessageListProvider>
6969
<Box is='section' display='flex' flexDirection='column' flexGrow={1} flexShrink={1} flexBasis='auto' height='full'>
70-
<CustomScrollbars>
70+
<VirtualizedScrollbars>
7171
<Virtuoso
7272
totalCount={queryResult.data.length}
7373
overscan={25}
@@ -104,7 +104,7 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes
104104
);
105105
}}
106106
/>
107-
</CustomScrollbars>
107+
</VirtualizedScrollbars>
108108
</Box>
109109
</MessageListProvider>
110110
</MessageListErrorBoundary>

apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Virtuoso } from 'react-virtuoso';
66

77
import { MessageTypes } from '../../../../../../app/ui-utils/client';
88
import { ContextualbarEmptyContent } from '../../../../../components/Contextualbar';
9-
import { CustomScrollbars } from '../../../../../components/CustomScrollbars';
9+
import { VirtualizedScrollbars } from '../../../../../components/CustomScrollbars';
1010
import RoomMessage from '../../../../../components/message/variants/RoomMessage';
1111
import SystemMessage from '../../../../../components/message/variants/SystemMessage';
1212
import { useFormatDate } from '../../../../../hooks/useFormatDate';
@@ -41,7 +41,7 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
4141
<MessageListErrorBoundary>
4242
<MessageListProvider>
4343
<Box is='section' display='flex' flexDirection='column' flexGrow={1} flexShrink={1} flexBasis='auto' height='full'>
44-
<CustomScrollbars>
44+
<VirtualizedScrollbars>
4545
<Virtuoso
4646
totalCount={messageSearchQuery.data.length}
4747
overscan={25}
@@ -82,7 +82,7 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
8282
setLimit((limit) => limit + pageSize);
8383
}}
8484
/>
85-
</CustomScrollbars>
85+
</VirtualizedScrollbars>
8686
</Box>
8787
</MessageListProvider>
8888
</MessageListErrorBoundary>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* eslint-disable testing-library/no-container */
2+
/* eslint-disable testing-library/no-node-access */
3+
import { mockAppRoot } from '@rocket.chat/mock-providers';
4+
import { render, waitFor } from '@testing-library/react';
5+
6+
import TeamsChannels from './TeamsChannels';
7+
import { createFakeRoom } from '../../../../../tests/mocks/data';
8+
9+
jest.mock('../../../../lib/rooms/roomCoordinator', () => ({
10+
roomCoordinator: {
11+
getRouteLink: () => undefined,
12+
},
13+
}));
14+
15+
const mainRoom = createFakeRoom({ name: 'Main Room' });
16+
const fakeRooms = Array.from({ length: 10 }, (_, index) => createFakeRoom({ t: 'c', name: `Fake Room ${index}` }));
17+
18+
beforeEach(() => {
19+
Object.defineProperty(window, 'getComputedStyle', {
20+
value: () => {
21+
return {
22+
getPropertyPriority: () => undefined,
23+
getPropertyValue: () => undefined,
24+
};
25+
},
26+
});
27+
});
28+
29+
// TODO: Replace this with the storybook & snapshot
30+
it('should render scrollbars', async () => {
31+
const { container } = render(
32+
<TeamsChannels
33+
text=''
34+
type='all'
35+
reload={() => undefined}
36+
loadMoreItems={() => undefined}
37+
setText={() => undefined}
38+
setType={() => undefined}
39+
onClickClose={() => undefined}
40+
onClickAddExisting={() => undefined}
41+
onClickView={() => undefined}
42+
onClickCreateNew={() => undefined}
43+
total={fakeRooms.length}
44+
loading={false}
45+
mainRoom={mainRoom}
46+
channels={fakeRooms}
47+
/>,
48+
{
49+
wrapper: mockAppRoot().build(),
50+
},
51+
);
52+
53+
await waitFor(() => {
54+
expect(container.querySelector('[data-overlayscrollbars]')).toBeInTheDocument();
55+
});
56+
57+
expect(container.querySelector('[data-overlayscrollbars]')).toBeInTheDocument();
58+
});

apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
ContextualbarEmptyContent,
1919
ContextualbarSection,
2020
} from '../../../../components/Contextualbar';
21-
import { CustomScrollbars } from '../../../../components/CustomScrollbars';
21+
import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars';
2222
import InfiniteListAnchor from '../../../../components/InfiniteListAnchor';
2323

2424
type TeamsChannelsProps = {
@@ -111,7 +111,7 @@ const TeamsChannels = ({
111111
</Box>
112112
</Box>
113113
<Box w='full' h='full' role='list' overflow='hidden' flexShrink={1}>
114-
<CustomScrollbars>
114+
<VirtualizedScrollbars>
115115
<Virtuoso
116116
totalCount={total}
117117
data={channels}
@@ -121,7 +121,7 @@ const TeamsChannels = ({
121121
<TeamsChannelItem onClickView={onClickView} room={data} mainRoom={mainRoom} reload={reload} key={index} />
122122
)}
123123
/>
124-
</CustomScrollbars>
124+
</VirtualizedScrollbars>
125125
</Box>
126126
</>
127127
)}

0 commit comments

Comments
 (0)