Shared: Components: Added event separation.

packages/shared/components/article-item/ArticleItem.tsx

@@ -69,10 +69,14 @@ export const ArticleItemPure = (props: ArticleItemProps) => {
     badgeTitle,
   } = props;
 
-  const onClickAction = (e) => {
+  const onClickAction = (e: React.MouseEvent) => {
     onClick?.(e, id);
   };
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 1) return;
 
+    onClickAction(e);
+  };
   const onClickBadgeAction = (e: React.MouseEvent) => {
     e.stopPropagation();
     onClickBadge?.(id);
@@ -112,7 +116,7 @@ export const ArticleItemPure = (props: ArticleItemProps) => {
           isDragActive={isDragActive}
           onClick={onClickAction}
           onMouseUp={onMouseUpAction}
-          onMouseDown={onClickAction}
+          onMouseDown={onMouseDown}
         />
         <StyledArticleItemImg isActive={isActive}>
           <ReactSVG className="icon" src={icon} />

packages/shared/components/article/sub-components/DevToolsBar.tsx

@@ -49,7 +49,7 @@ const ArticleDevToolsBar = ({
   const { t } = useTranslation(["Common"]);
   const navigate = useNavigate();
 
-  const onClick = (e) => {
+  const onClick = (e: React.MouseEvent) => {
     const path = "/portal-settings/developer-tools";
 
     if (openingNewTab(path, e)) return;
@@ -60,10 +60,16 @@ const ArticleDevToolsBar = ({
       toggleArticleOpen();
   };
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 1) return;
+
+    onClick(e);
+  };
+
   if (!showText) return null;
 
   return (
-    <StyledWrapper onClick={onClick} onMouseDown={onClick}>
+    <StyledWrapper onClick={onClick} onMouseDown={onMouseDown}>
       <ReactSVG src={DeveloperReactSvgUrl} className="icon" />
       <Text fontWeight={600} fontSize="12px" className="label">
         {t("Common:DeveloperTools")}

packages/shared/components/article/sub-components/Profile.tsx

@@ -89,6 +89,11 @@ const ArticleProfile = (props: ArticleProfileProps) => {
     onProfileClick?.({ originalEvent: e });
   };
 
+  const onNameMouseDownClick = (e: React.MouseEvent) => {
+    if (e.button !== 1) return;
+    onNameClick(e);
+  };
+
   const onHide = () => {
     setIsOpen(false);
   };
@@ -143,7 +148,10 @@ const ArticleProfile = (props: ArticleProfileProps) => {
         </div>
         {(!isTabletView || showText) && (
           <>
-            <StyledUserName onClick={onNameClick} onMouseDown={onNameClick}>
+            <StyledUserName
+              onMouseDown={onNameMouseDownClick}
+              onClick={onNameClick}
+            >
               <Text fontWeight={600} noSelect truncate dir="auto">
                 {firstTerm}
                 &nbsp;

packages/shared/components/avatar/Avatar.tsx

@@ -157,13 +157,19 @@ const AvatarPure = ({
     <Text fontSize="12px">{content}</Text>
   );
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 1) return;
+
+    if (onClick) onClick(e);
+  };
+
   return (
     <StyledAvatar
       size={size}
       data-testid="avatar"
       className={className}
+      onMouseDown={onMouseDown}
       onClick={onClick}
-      onMouseDown={onClick}
     >
       <AvatarWrapper
         source={source}