Fix: Clicking on members pile does nothing. (#11657)

* Fix: Clicking on pile opens members list

* onClick used on Accessible Component

* Updated snapshots for testing

* Snapshots updated after merging

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
This commit is contained in:
Manan Sadana 2023-10-06 12:24:25 +05:30 committed by GitHub
parent 91413bc6b6
commit 54fa9a572e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 22 deletions

View file

@ -19,6 +19,7 @@ import { RoomMember } from "matrix-js-sdk/src/matrix";
import { AvatarStack, Tooltip } from "@vector-im/compound-web";
import MemberAvatar from "../avatars/MemberAvatar";
import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
interface IProps extends HTMLAttributes<HTMLSpanElement> {
members: RoomMember[];
@ -28,6 +29,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
tooltipShortcut?: string;
children?: ReactNode;
viewUserOnClick?: boolean;
onClick?: (e: ButtonEvent) => void | Promise<void>;
}
const FacePile: FC<IProps> = ({
@ -64,8 +66,10 @@ const FacePile: FC<IProps> = ({
const content = (
<div className="mx_FacePile">
<AvatarStack>{pileContents}</AvatarStack>
{children}
<AccessibleButton kind="link_inline" onClick={props.onClick ?? null}>
<AvatarStack>{pileContents}</AvatarStack>
{children}
</AccessibleButton>
</div>
);

View file

@ -23,6 +23,7 @@ import DMRoomMap from "../../../utils/DMRoomMap";
import FacePile from "./FacePile";
import { useRoomMembers } from "../../../hooks/useRoomMembers";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { ButtonEvent } from "./AccessibleButton";
const DEFAULT_NUM_FACES = 5;
@ -32,6 +33,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
room: Room;
onlyKnownUsers?: boolean;
numShown?: number;
onClick?: (e: ButtonEvent) => void | Promise<void>;
}
const RoomFacePile: FC<IProps> = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }) => {