mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-12-02 07:51:47 +01:00
Code Issues Projects Releases Wiki Activity

Fix blank sections at the top and bottom of the member list when scrolling (#31198)

Browse Source 
* Add memberlist overscan

* Update memberlist.spec.ts
This commit is contained in:
David Langley 2025-11-12 19:02:58 +00:00 committed by GitHub
parent 11b2ecb041
commit bb582fa8f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
playwright/e2e/right-panel/memberlist.spec.ts
View File

@ -80,13 +80,12 @@ test.describe("Memberlist", () => {
await app.scrollListToBottom(memberListContainer);
// Wait for the target member to be visible after scrolling
const targetName = "Member14";
// Member9 is the last in the list as they are lexicographically sorted
const targetName = "Member9";
const targetMember = memberlist.locator(".mx_MemberTileView_name").filter({ hasText: targetName });
await targetMember.waitFor({ state: "visible" });
// Verify Alice is not visible at this point
await expect(memberlist.locator(".mx_MemberTileView_name").filter({ hasText: "Alice" })).toHaveCount(0);
// Alice is not visible and will require scrolling to,
// but is likely in the dom as we have an overscan on the top and bottom of the list.
// Click on a member near the bottom of the list
await expect(targetMember).toBeVisible();
await targetMember.click();

15
src/components/views/rooms/MemberList/MemberListView.tsx
View File

@ -26,6 +26,16 @@ interface IProps {
onClose: () => void;
}
/**
* Height of a single member list item
*/
const MEMBER_LIST_ITEM_HEIGHT = 56;
/**
* Amount to extend the top and bottom of the viewport by.
* From manual testing 15 items seems to be enough to never really see the blank space when scrolling.
*/
const EXTENDED_VIEWPORT_HEIGHT = 15 * MEMBER_LIST_ITEM_HEIGHT;
const MemberListView: React.FC<IProps> = (props: IProps) => {
const vm = useMemberListViewModel(props.roomId);
const { isPresenceEnabled, memberCount } = vm;
@ -106,6 +116,11 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
isItemFocusable={isItemFocusable}
role="listbox"
aria-label={_t("member_list|list_title")}
fixedItemHeight={MEMBER_LIST_ITEM_HEIGHT}
increaseViewportBy={{
bottom: EXTENDED_VIEWPORT_HEIGHT,
top: EXTENDED_VIEWPORT_HEIGHT,
}}
/>
</Flex>
</BaseCard>