diff --git a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
index 493ed0d1ab..ed402bc625 100644
--- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@@ -77,4 +77,20 @@ test.describe("Room list", () => {
await page.getByRole("menuitem", { name: "leave room" }).click();
await expect(roomItem).not.toBeVisible();
});
+
+ test("should scroll to the current room", async ({ page, app, user }) => {
+ const roomListView = getRoomList(page);
+ await roomListView.hover();
+ // Scroll to the end of the room list
+ await page.mouse.wheel(0, 1000);
+
+ await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+
+ const filters = page.getByRole("listbox", { name: "Room list filters" });
+ await filters.getByRole("option", { name: "People" }).click();
+ await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+
+ await filters.getByRole("option", { name: "People" }).click();
+ await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+ });
});
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png
index 45d5588733..0188cb76b2 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
index 0501bf1e4c..083cab778e 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ
diff --git a/res/css/views/rooms/RoomListPanel/_RoomList.pcss b/res/css/views/rooms/RoomListPanel/_RoomList.pcss
index 2563c1b675..54798f1ea9 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomList.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomList.pcss
@@ -7,9 +7,4 @@
.mx_RoomList {
height: 100%;
-
- .mx_RoomList_List {
- /* Avoid when on hover, the background color to be on top of the right border */
- padding-right: 1px;
- }
}
diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
index e53ba3dc79..2e1d42d62e 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
@@ -47,3 +47,7 @@
.mx_RoomListItemView_menu_open {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
+
+.mx_RoomListItemView_selected {
+ background-color: var(--cpd-color-bg-action-secondary-pressed);
+}
diff --git a/src/components/views/rooms/RoomListPanel/RoomList.tsx b/src/components/views/rooms/RoomListPanel/RoomList.tsx
index 006d1b9732..67f36b2a19 100644
--- a/src/components/views/rooms/RoomListPanel/RoomList.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomList.tsx
@@ -22,10 +22,12 @@ interface RoomListProps {
/**
* A virtualized list of rooms.
*/
-export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
+export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Element {
const roomRendererMemoized = useCallback(
- ({ key, index, style }: ListRowProps) => ,
- [rooms],
+ ({ key, index, style }: ListRowProps) => (
+
+ ),
+ [rooms, activeIndex],
);
// The first div is needed to make the virtualized list take all the remaining space and scroll correctly
@@ -41,6 +43,7 @@ export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
rowHeight={48}
height={height}
width={width}
+ scrollToIndex={activeIndex}
/>
)}
diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
index 20173e324e..37ad4ec848 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
@@ -20,12 +20,16 @@ interface RoomListItemViewPropsProps extends React.HTMLAttributes vm.openRoom()}
onMouseOver={() => setIsHover(true)}
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
index 3023f9a9a7..217015451c 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
@@ -42,13 +42,13 @@ describe("", () => {
test("should render a room item", () => {
const onClick = jest.fn();
- const { asFragment } = render();
+ const { asFragment } = render();
expect(asFragment()).toMatchSnapshot();
});
test("should call openRoom when clicked", async () => {
const user = userEvent.setup();
- render();
+ render();
await user.click(screen.getByRole("button", { name: `Open room ${room.name}` }));
expect(defaultValue.openRoom).toHaveBeenCalled();
@@ -58,11 +58,20 @@ describe("", () => {
mocked(useRoomListItemViewModel).mockReturnValue({ ...defaultValue, showHoverMenu: true });
const user = userEvent.setup();
- render(, withClientContextRenderOptions(matrixClient));
+ render(, withClientContextRenderOptions(matrixClient));
const listItem = screen.getByRole("button", { name: `Open room ${room.name}` });
expect(screen.queryByRole("button", { name: "More Options" })).toBeNull();
await user.hover(listItem);
await waitFor(() => expect(screen.getByRole("button", { name: "More Options" })).toBeInTheDocument());
});
+
+ test("should be selected if isSelected=true", async () => {
+ const { asFragment } = render();
+ expect(screen.queryByRole("button", { name: `Open room ${room.name}` })).toHaveAttribute(
+ "aria-selected",
+ "true",
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
});
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
index 37f8a0364a..00c0793080 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
@@ -24,6 +24,7 @@ exports[` should render a room list 1`] = `
>
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should render a room list 1`] = `
should be selected if isSelected=true 1`] = `
+
+
+
+`;
+
exports[` should render a room item 1`] = `