From 55f1c27184b46c0f8024f99115050edefe035595 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 2 Apr 2025 15:45:24 +0530
Subject: [PATCH] Room List: Scroll to top of the list when active room is not
 in the list (#29650)

* Scroll to top when active room is not in list

So that when filters are applied and the active room is not in the list
anymore, the list is scrolled to the top.

* Write test
---
 .../room-list-filter-sort.spec.ts             | 63 ++++++++++++++++---
 .../views/rooms/RoomListPanel/RoomList.tsx    |  2 +-
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
index 3ebfb22de1..21d22d8ccd 100644
--- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@@ -22,20 +22,67 @@ test.describe("Room list filters and sort", () => {
         return page.getByRole("listbox", { name: "Room list filters" });
     }
 
+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
     test.beforeEach(async ({ page, app, bot, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
     });
 
-    test.describe("Room list", () => {
-        /**
-         * Get the room list
-         * @param page
-         */
-        function getRoomList(page: Page) {
-            return page.getByTestId("room-list");
-        }
+    test.describe("Scroll behaviour", () => {
+        test("should scroll to the top of list when filter is applied and active room is not in filtered list", async ({
+            page,
+            app,
+        }) => {
+            const createFavouriteRoom = async (name: string) => {
+                const id = await app.client.createRoom({
+                    name,
+                });
+                await app.client.evaluate(async (client, favouriteId) => {
+                    await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+                }, id);
+            };
 
+            // Create 5 favourite rooms
+            let i = 0;
+            for (; i < 5; i++) {
+                await createFavouriteRoom(`room${i}-fav`);
+            }
+
+            // Create a non-favourite room
+            await app.client.createRoom({ name: `room-non-fav` });
+
+            // Create rest of the favourite rooms
+            for (; i < 20; i++) {
+                await createFavouriteRoom(`room${i}-fav`);
+            }
+
+            // Open the non-favourite room
+            const roomListView = getRoomList(page);
+            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
+            await tile.scrollIntoViewIfNeeded();
+            await tile.click();
+
+            // Enable Favourite filter
+            const primaryFilters = getPrimaryFilters(page);
+            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+            await expect(tile).not.toBeVisible();
+
+            // Ensure the room list is not scrolled
+            const isScrolledDown = await page
+                .getByRole("grid", { name: "Room list" })
+                .evaluate((e) => e.scrollTop !== 0);
+            expect(isScrolledDown).toStrictEqual(false);
+        });
+    });
+
+    test.describe("Room list", () => {
         let unReadDmId: string | undefined;
         let unReadRoomId: string | undefined;
 
diff --git a/src/components/views/rooms/RoomListPanel/RoomList.tsx b/src/components/views/rooms/RoomListPanel/RoomList.tsx
index 67f36b2a19..628723246f 100644
--- a/src/components/views/rooms/RoomListPanel/RoomList.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomList.tsx
@@ -43,7 +43,7 @@ export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Ele
                         rowHeight={48}
                         height={height}
                         width={width}
-                        scrollToIndex={activeIndex}
+                        scrollToIndex={activeIndex ?? 0}
                     />
                 )}
             </AutoSizer>