Spotlight: don't join a public room when clicking on it

playwright/e2e/knock/knock-into-room.spec.ts

@@ -291,7 +291,7 @@ test.describe("Knock Into Room", () => {
         const spotlightDialog = await app.openSpotlight();
         await spotlightDialog.filter(Filter.PublicRooms);
         await expect(spotlightDialog.results.nth(0)).toContainText("Cybersecurity");
-        await spotlightDialog.results.nth(0).click();
+        await spotlightDialog.results.nth(0).getByRole("button").click();
 
         const roomPreviewBar = page.locator(".mx_RoomPreviewBar");
         await expect(roomPreviewBar.getByRole("heading", { name: "Ask to join?" })).toBeVisible();

playwright/e2e/spotlight/spotlight.spec.ts

@@ -159,7 +159,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator).toHaveCount(1);
         await expect(resultLocator.first()).toContainText(room2Name);
         await expect(resultLocator.first()).toContainText("Join");
-        await resultLocator.first().click();
+        await resultLocator.first().getByRole("button").click();
         expect(page.url()).toContain(room2Id);
         await expect(page.locator(".mx_RoomView_MessageList")).toHaveCount(1);
         await expect(roomHeaderName(page)).toContainText(room2Name);
@@ -174,7 +174,7 @@ test.describe("Spotlight", () => {
         await expect(resultLocator).toHaveCount(1);
         await expect(resultLocator.first()).toContainText(room3Name);
         await expect(resultLocator.first()).toContainText("View");
-        await resultLocator.first().click();
+        await resultLocator.first().getByRole("button").click();
         expect(page.url()).toContain(room3Id);
         await page.getByRole("button", { name: "Join the discussion" }).click();
         await expect(roomHeaderName(page)).toHaveText(room3Name);

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -267,6 +267,8 @@ limitations under the License.
 
                 &.mx_SpotlightDialog_result_multiline {
                     align-items: flex-start;
+                    /* Override the default button cursor */
+                    cursor: default;
 
                     .mx_AccessibleButton {
                         padding: $spacing-4 $spacing-20;
@@ -359,7 +361,10 @@ limitations under the License.
                         background: $tertiary-content;
                     }
 
-                    &:hover::before,
+                    &:hover::before {
+                        background-color: var(--cpd-color-bg-subtle-secondary);
+                    }
+
                     &[aria-selected="true"]::before {
                         background-color: $secondary-content;
                     }
@@ -369,7 +374,10 @@ limitations under the License.
                     mask-image: url("$(res)/img/element-icons/context-menu.svg");
                 }
 
-                &:hover,
+                &:hover {
+                    background-color: var(--cpd-color-bg-subtle-secondary);
+                }
+
                 &[aria-selected="true"] {
                     background-color: $system;
 

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -87,6 +87,7 @@ import { useFeatureEnabled } from "../../../../hooks/useSettings";
 import { filterBoolean } from "../../../../utils/arrays";
 import { transformSearchTerm } from "../../../../utils/SearchInput";
 import { Filter } from "./Filter";
+import { Key } from "../../../../Keyboard";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
@@ -698,6 +699,16 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     );
                 };
 
+                const keyboardListener = (ev: ButtonEvent): void => {
+                    const event = ev as React.KeyboardEvent;
+                    // We want to be able to interact with the content of the row without joining automatically a room
+                    // But we want to keep the listener for keyboard action
+                    // We check `event.detail` because of an unknown reason on some cases, `event.key` is undefined on an `Enter` key press
+                    if (event.key === Key.ENTER || event.key === Key.SPACE || event.detail === 0) {
+                        listener(ev);
+                    }
+                };
+
                 let buttonLabel;
                 if (showViewButton) {
                     buttonLabel = _t("action|view");
@@ -710,7 +721,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         id={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}`}
                         className="mx_SpotlightDialog_result_multiline"
                         key={`${Section[result.section]}-${result.publicRoom.room_id}`}
-                        onClick={listener}
+                        onClick={keyboardListener}
                         endAdornment={
                             <AccessibleButton
                                 kind={showViewButton ? "primary_outline" : "primary"}