Room list: display the menu option on the room list item when clicked/opened (#31380)

* 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

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");
         });

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();
     });

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -98,7 +98,6 @@ export const RoomListItemView = memo(function RoomListItemView({
             onFocus={(e: React.FocusEvent<HTMLButtonElement>) => onFocus(room, e)}
             onMouseOver={() => setHover(true)}
             onMouseOut={() => setHover(false)}
-            onBlur={() => setHover(false)}
             tabIndex={isFocused ? 0 : -1}
             {...props}
         >