From 6228edcd676dc1dcc2a452017515b7fecadf9864 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Tue, 2 Dec 2025 11:24:11 +0100 Subject: [PATCH] Room list: display the menu option on the room list item when clicked/opened (#31380) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: display the menu option on the room list item when clicked/opened Fix #31366 `onBlur` was called when the room is opened, the focus is moved to the composr. The hover state was removed. The hover state is diplayed when `ìsFocused=true` so the keyboard navigation is not impacted * test: update room list e2e tests * test: update marked as unread state --- .../room-list-panel/room-list.spec.ts | 15 ++++++--------- .../e2e/room_options/marked_unread.spec.ts | 7 +++---- .../room-list-item-low-priority-linux.png | Bin 2698 -> 2698 bytes .../rooms/RoomListPanel/RoomListItemView.tsx | 1 - 4 files changed, 9 insertions(+), 14 deletions(-) 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 6578904fdc..4d09f228d0 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 @@ -299,9 +299,7 @@ test.describe("Room list", () => { const publicRoom = roomListView.getByRole("option", { name: "low priority room" }); // Make room low priority - await publicRoom.hover(); - const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" }); - await roomItemMenu.click(); + await publicRoom.click({ button: "right" }); await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click(); // Should have low priority decoration @@ -309,8 +307,8 @@ test.describe("Room list", () => { "This is a low priority room", ); - // focus the user menu to avoid to have hover decoration - await page.getByRole("button", { name: "User menu" }).focus(); + // focus the header to avoid to have hover decoration + await page.getByTestId("room-list-header").click(); await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png"); }); @@ -450,12 +448,11 @@ test.describe("Room list", () => { await bot.joinRoom(roomId); const room = roomListView.getByRole("option", { name: "mark as unread" }); - await room.hover(); - await room.getByRole("button", { name: "More Options" }).click(); + await room.click({ button: "right" }); await page.getByRole("menuitem", { name: "mark as unread" }).click(); - // focus the user menu to avoid to have hover decoration - await page.getByRole("button", { name: "User menu" }).focus(); + // focus the header to avoid to have hover decoration + await page.getByTestId("room-list-header").click(); await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png"); }); diff --git a/playwright/e2e/room_options/marked_unread.spec.ts b/playwright/e2e/room_options/marked_unread.spec.ts index 911404e881..ce3e170072 100644 --- a/playwright/e2e/room_options/marked_unread.spec.ts +++ b/playwright/e2e/room_options/marked_unread.spec.ts @@ -47,12 +47,11 @@ test.describe("Mark as Unread", () => { await page.goto("/#/room/" + dummyRoomId); const roomTile = page.getByLabel(TEST_ROOM_NAME); - await roomTile.focus(); - await roomTile.getByRole("button", { name: "More Options" }).click(); + await roomTile.click({ button: "right" }); await page.getByRole("menuitem", { name: "Mark as unread" }).click(); - // focus the user menu to avoid to have hover decoration - await page.getByRole("button", { name: "User menu" }).focus(); + // focus another room to make the notification decoration appear (room options are display on hover) + await page.getByRole("option", { name: "Open room Room of no consequence" }).click(); await expect(roomTile.getByTestId("notification-decoration")).toBeVisible(); }); diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png index ce53a39e88a0e5a9b891723426d6233cefa8c78d..c9dd4b6bd8c8c85f08193782ec57371bff7e9597 100644 GIT binary patch delta 2419 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 => onFocus(room, e)} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)} - onBlur={() => setHover(false)} tabIndex={isFocused ? 0 : -1} {...props} >