From f714e8c32faa2d3598aa6e17e5f9d75bc726638e Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 27 Jun 2022 22:45:41 -0600
Subject: [PATCH 1/3] Keep clicks on pills within the app

---
 res/css/views/elements/_Pill.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss
index 71111748e29..608cad180db 100644
--- a/res/css/views/elements/_Pill.scss
+++ b/res/css/views/elements/_Pill.scss
@@ -59,6 +59,8 @@ limitations under the License.
         white-space: nowrap; // enforce the pill text to be a single line
         overflow: hidden;
         text-overflow: ellipsis;
+
+        pointer-events: none; // ensure clicks on the pills go through the anchor
     }
 
     a& {

From 8034bbcb0e5af2e9d46f26032a25bf326905dff4 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 27 Jun 2022 23:08:27 -0600
Subject: [PATCH 2/3] Add a regression test

---
 .../pills-click-in-app.spec.ts                | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 cypress/integration/13-regression-tests/pills-click-in-app.spec.ts

diff --git a/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts b/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts
new file mode 100644
index 00000000000..85722f1d7f4
--- /dev/null
+++ b/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts
@@ -0,0 +1,76 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+
+describe("Pills", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+
+            cy.initTestUser(synapse, "Sally");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it('should navigate clicks internally to the app', () => {
+        const messageRoom = "Send Messages Here";
+        const targetLocalpart = "aliasssssssssssss";
+        cy.createRoom({
+            name: "Target",
+            room_alias_name: targetLocalpart,
+        }).as("targetRoomId");
+        cy.createRoom({
+            name: messageRoom,
+        }).as("messageRoomId");
+        cy.all([
+            cy.get<string>("@targetRoomId"),
+            cy.get<string>("@messageRoomId"),
+        ]).then(([targetRoomId, messageRoomId]) => { // discard room IDs - we don't need them
+            cy.viewRoomByName(messageRoom);
+            cy.url().should("contain", `/#/room/${messageRoomId}`);
+
+            // send a message using the built-in room mention functionality (autocomplete)
+            cy.get(".mx_SendMessageComposer .mx_BasicMessageComposer_input")
+                .type(`Hello world! Join here: #${targetLocalpart.substring(0, 3)}`);
+            cy.get(".mx_Autocomplete_Completion_title").click();
+            cy.get(".mx_MessageComposer_sendMessage").click();
+
+            // find the pill in the timeline and click it
+            cy.get(".mx_EventTile_body .mx_Pill").click();
+
+            // verify we landed at a sane place
+            cy.url().should("contain", `/#/room/#${targetLocalpart}:`);
+
+            cy.wait(250); // let the room list settle
+
+            // go back to the message room and try to click on the pill text, as a user would
+            cy.viewRoomByName(messageRoom);
+            cy.get(".mx_EventTile_body .mx_Pill .mx_Pill_linkText")
+                .should("have.css", "pointer-events", "none")
+                .click({ force: true }); // force is to ensure we bypass pointer-events
+            cy.url().should("contain", `https://matrix.to/#/#${targetLocalpart}:`);
+        });
+    });
+
+});

From 46f7ad44f48aad57420f6f933cc5350fcdfeaf7f Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 27 Jun 2022 23:11:36 -0600
Subject: [PATCH 3/3] Appease the linter

---
 .../integration/13-regression-tests/pills-click-in-app.spec.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts b/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts
index 85722f1d7f4..33c86cbf3ac 100644
--- a/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts
+++ b/cypress/integration/13-regression-tests/pills-click-in-app.spec.ts
@@ -46,7 +46,7 @@ describe("Pills", () => {
         cy.all([
             cy.get<string>("@targetRoomId"),
             cy.get<string>("@messageRoomId"),
-        ]).then(([targetRoomId, messageRoomId]) => { // discard room IDs - we don't need them
+        ]).then(([targetRoomId, messageRoomId]) => { // discard the target room ID - we don't need it
             cy.viewRoomByName(messageRoom);
             cy.url().should("contain", `/#/room/${messageRoomId}`);
 
@@ -72,5 +72,4 @@ describe("Pills", () => {
             cy.url().should("contain", `https://matrix.to/#/#${targetLocalpart}:`);
         });
     });
-
 });