Fix user pill click (#10359)

Author: weeman1337

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,14 +44,20 @@ 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 = {
             inMessage: true,
             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", () => {