Fix user pill click (#10359)

src/hooks/usePermalink.ts

@@ -167,6 +167,7 @@ export const usePermalink: (args: Args) => HookResult = ({ room, type: argType,
         text = member.name || resourceId;
         onClick = (e: ButtonEvent): void => {
             e.preventDefault();
+            e.stopPropagation();
             dis.dispatch({
                 action: Action.ViewUser,
                 member: member,

test/components/views/elements/Pill-test.tsx

@@ -31,6 +31,7 @@ import {
 } from "../../../test-utils";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { Action } from "../../../../src/dispatcher/actions";
+import { ButtonEvent } from "../../../../src/components/views/elements/AccessibleButton";
 
 describe("<Pill>", () => {
     let client: Mocked<MatrixClient>;
@@ -43,6 +44,7 @@ describe("<Pill>", () => {
     const user1Id = "@user1:example.com";
     const user2Id = "@user2:example.com";
     let renderResult: RenderResult;
+    let pillParentClickHandler: (e: ButtonEvent) => void;
 
     const renderPill = (props: PillProps): void => {
         const withDefault = {
@@ -50,7 +52,12 @@ describe("<Pill>", () => {
             shouldShowPillAvatar: true,
             ...props,
         } as PillProps;
-        renderResult = render(<Pill {...withDefault} />);
+        // wrap Pill with a div to allow testing of event bubbling
+        renderResult = render(
+            <div onClick={pillParentClickHandler}>
+                <Pill {...withDefault} />
+            </div>,
+        );
     };
 
     filterConsole(
@@ -88,6 +95,7 @@ describe("<Pill>", () => {
         });
 
         jest.spyOn(dis, "dispatch");
+        pillParentClickHandler = jest.fn();
     });
 
     describe("when rendering a pill for a room", () => {
@@ -168,11 +176,13 @@ describe("<Pill>", () => {
                 await userEvent.click(screen.getByText("User 1"));
             });
 
-            it("should dipsatch a view user action", () => {
+            it("should dipsatch a view user action and prevent event bubbling", () => {
                 expect(dis.dispatch).toHaveBeenCalledWith({
                     action: Action.ViewUser,
                     member: room1.getMember(user1Id),
                 });
+
+                expect(pillParentClickHandler).not.toHaveBeenCalled();
             });
         });
     });
@@ -195,7 +205,11 @@ describe("<Pill>", () => {
         renderPill({
             url: permalinkPrefix,
         });
-        expect(renderResult.asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
+        expect(renderResult.asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <div />
+            </DocumentFragment>
+        `);
     });
 
     it("should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false", () => {

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -1,9 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Pill> should not render a non-permalink 1`] = `<DocumentFragment />`;
+exports[`<Pill> should not render a non-permalink 1`] = `
+<DocumentFragment>
+  <div />
+</DocumentFragment>
+`;
 
 exports[`<Pill> should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <span
         class="mx_Pill mx_RoomPill"
@@ -15,11 +20,13 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
         </span>
       </span>
     </bdi>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<Pill> should render the expected pill for @room 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <span
         class="mx_Pill mx_AtRoomPill"
@@ -52,11 +59,13 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
         </span>
       </span>
     </bdi>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<Pill> should render the expected pill for a room alias 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
@@ -90,11 +99,13 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
         </span>
       </a>
     </bdi>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<Pill> should render the expected pill for a space 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
@@ -128,11 +139,13 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
         </span>
       </a>
     </bdi>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
@@ -166,11 +179,13 @@ exports[`<Pill> should render the expected pill for a user not in the room 1`] =
         </span>
       </a>
     </bdi>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<Pill> when rendering a pill for a room should render the expected pill 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
@@ -204,11 +219,13 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
         </span>
       </a>
     </bdi>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<Pill> when rendering a pill for a user in the room should render as expected 1`] = `
 <DocumentFragment>
+  <div>
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
@@ -242,5 +259,6 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
         </span>
       </a>
     </bdi>
+  </div>
 </DocumentFragment>
 `;