Use forwardRef in Avatar components to allow use with Compound Tooltips (#12063)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/avatars/BaseAvatar.tsx

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react";
 import classNames from "classnames";
 import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { Avatar } from "@vector-im/compound-web";
@@ -38,7 +38,6 @@ interface IProps {
     type?: React.ComponentProps<typeof Avatar>["type"];
     size: string;
     onClick?: (ev: ButtonEvent) => void;
-    inputRef?: React.RefObject<HTMLSpanElement>;
     className?: string;
     tabIndex?: number;
     altText?: string;
@@ -95,7 +94,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [
     return [imageUrl, onError];
 };
 
-const BaseAvatar: React.FC<IProps> = (props) => {
+const BaseAvatar = forwardRef<HTMLElement, IProps>((props, ref) => {
     const {
         name,
         idName,
@@ -104,7 +103,6 @@ const BaseAvatar: React.FC<IProps> = (props) => {
         urls,
         size = "40px",
         onClick,
-        inputRef,
         className,
         type = "round",
         altText = _t("common|avatar"),
@@ -127,7 +125,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
 
     return (
         <Avatar
-            ref={inputRef}
+            ref={ref}
             src={imageUrl}
             id={idName ?? ""}
             name={name ?? ""}
@@ -143,7 +141,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
             data-testid="avatar-img"
         />
     );
-};
+});
 
 export default BaseAvatar;
 export type BaseAvatarType = React.FC<IProps>;

src/components/views/avatars/MemberAvatar.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode, useContext } from "react";
+import React, { forwardRef, ReactNode, Ref, useContext } from "react";
 import { RoomMember, ResizeMethod } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../dispatcher/dispatcher";
@@ -42,7 +42,8 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     children?: ReactNode;
 }
 
-export default function MemberAvatar({
+function MemberAvatar(
+    {
         size,
         resizeMethod = "crop",
         viewUserOnClick,
@@ -51,7 +52,9 @@ export default function MemberAvatar({
         hideTitle,
         member: propsMember,
         ...props
-}: IProps): JSX.Element {
+    }: IProps,
+    ref: Ref<HTMLElement>,
+): JSX.Element {
     const card = useContext(CardContext);
 
     const member = useRoomMemberProfile({
@@ -100,12 +103,9 @@ export default function MemberAvatar({
                     : props.onClick
             }
             altText={_t("common|user_avatar")}
+            ref={ref}
         />
     );
 }
 
-export class LegacyMemberAvatar extends React.Component<IProps> {
-    public render(): React.ReactNode {
-        return <MemberAvatar {...this.props}>{this.props.children}</MemberAvatar>;
-    }
-}
+export default forwardRef(MemberAvatar);

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -21,7 +21,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import NodeAnimator from "../../../NodeAnimator";
 import { toPx } from "../../../utils/units";
-import { LegacyMemberAvatar as MemberAvatar } from "../avatars/MemberAvatar";
+import MemberAvatar from "../avatars/MemberAvatar";
 import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
 
 export interface IReadReceiptInfo {
@@ -216,7 +216,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
                     aria-live="off"
                     size="14px"
                     style={style}
-                    inputRef={this.avatar as RefObject<HTMLImageElement>}
+                    ref={this.avatar}
                     hideTitle
                     tabIndex={-1}
                 />