From bb582fa8f3c859a2b7430ee70c5ea9a69c4910c8 Mon Sep 17 00:00:00 2001 From: David Langley Date: Wed, 12 Nov 2025 19:02:58 +0000 Subject: [PATCH] Fix blank sections at the top and bottom of the member list when scrolling (#31198) * Add memberlist overscan * Update memberlist.spec.ts --- playwright/e2e/right-panel/memberlist.spec.ts | 9 ++++----- .../views/rooms/MemberList/MemberListView.tsx | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts index 71a4a3cada..bb3dc8cb33 100644 --- a/playwright/e2e/right-panel/memberlist.spec.ts +++ b/playwright/e2e/right-panel/memberlist.spec.ts @@ -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(); diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx index 33ef02ea0e..298a9ae19c 100644 --- a/src/components/views/rooms/MemberList/MemberListView.tsx +++ b/src/components/views/rooms/MemberList/MemberListView.tsx @@ -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 = (props: IProps) => { const vm = useMemberListViewModel(props.roomId); const { isPresenceEnabled, memberCount } = vm; @@ -106,6 +116,11 @@ const MemberListView: React.FC = (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, + }} />