Prevent event propagation when clicking icon buttons (#11515)

* Prevent event propagation when clicking icon buttons

* Inhibit view user on click behaviour for room header face pile

* Update snapshot

src/components/views/elements/FacePile.tsx

@@ -27,15 +27,30 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
     tooltipLabel?: string;
     tooltipShortcut?: string;
     children?: ReactNode;
+    viewUserOnClick?: boolean;
 }
 
-const FacePile: FC<IProps> = ({ members, size, overflow, tooltipLabel, tooltipShortcut, children, ...props }) => {
+const FacePile: FC<IProps> = ({
+    members,
+    size,
+    overflow,
+    tooltipLabel,
+    tooltipShortcut,
+    children,
+    viewUserOnClick = true,
+    ...props
+}) => {
     const faces = members.map(
         tooltipLabel
             ? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
             : (m) => (
                   <Tooltip key={m.userId} label={m.name} shortcut={tooltipShortcut}>
-                      <MemberAvatar member={m} size={size} viewUserOnClick={!props.onClick} hideTitle />
+                      <MemberAvatar
+                          member={m}
+                          size={size}
+                          viewUserOnClick={!props.onClick && viewUserOnClick}
+                          hideTitle
+                      />
                   </Tooltip>
               ),
     );