fix: goalPreview open when clicked in an empty area inside GoalListItem

taskany-inc · Feb 26, 2024 · 2d8b5a0 · 2d8b5a0
1 parent a46a1d9
commit 2d8b5a0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 31 deletions.
diff --git a/src/components/GoalTableList/GoalTableList.tsx b/src/components/GoalTableList/GoalTableList.tsx
@@ -42,14 +42,7 @@ export const GoalTableList = <T extends Partial<NonNullable<GoalByIdReturnType>>
                     {
                         content: (
                             <>
-                                <Link
-                                    as={NextLink}
-                                    href={routes.goal(goal?._shortId as string)}
-                                    inline
-                                    onClick={onGoalPreviewShow(goal)}
-                                >
-                                    <Text>{goal.title}</Text>
-                                </Link>
+                                <Text>{goal.title}</Text>
                                 {nullable(goal.tags, (tags) => (
                                     <TagsList>
                                         {tags.map((tag) => (
@@ -135,29 +128,36 @@ export const GoalTableList = <T extends Partial<NonNullable<GoalByIdReturnType>>
                     },
                 ],
             })),
-        [goals, locale, onGoalPreviewShow, onTagClick],
+        [goals, locale, onTagClick],
     );
 
     return (
         <Table {...attrs}>
             {data.map((row) => (
-                <ListViewItem
+                <Link
                     key={row.goal.id}
-                    value={row.goal}
-                    renderItem={({ active, hovered: _, ...props }) => (
-                        <TableListItem
-                            selected={selectedGoalResolver?.(row.goal?.id as string)}
-                            hovered={active}
-                            {...props}
-                        >
-                            {row.list.map(({ content, width, className }, index) => (
-                                <TableListItemElement key={index} width={width} className={className}>
-                                    {content}
-                                </TableListItemElement>
-                            ))}
-                        </TableListItem>
-                    )}
-                />
+                    as={NextLink}
+                    href={routes.goal(row.goal?._shortId as string)}
+                    onClick={onGoalPreviewShow(row.goal)}
+                    inline
+                >
+                    <ListViewItem
+                        value={row.goal}
+                        renderItem={({ active, hovered: _, ...props }) => (
+                            <TableListItem
+                                selected={selectedGoalResolver?.(row.goal?.id as string)}
+                                hovered={active}
+                                {...props}
+                            >
+                                {row.list.map(({ content, width, className }, index) => (
+                                    <TableListItemElement key={index} width={width} className={className}>
+                                        {content}
+                                    </TableListItemElement>
+                                ))}
+                            </TableListItem>
+                        )}
+                    />
+                </Link>
             ))}
         </Table>
     );

diff --git a/src/components/NewGoalCriteria/NewGoalCriteria.tsx b/src/components/NewGoalCriteria/NewGoalCriteria.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { MouseEvent, useCallback, useRef, useState } from 'react';
 import { Checkbox, CircleProgressBar, Table, TableCell, TableRow, Text, Popup, Badge } from '@taskany/bricks/harmony';
 import { Spinner, nullable, useClickOutside } from '@taskany/bricks';
 import classNames from 'classnames';
@@ -151,11 +151,20 @@ export const GoalCriteriaPreview: React.FC<GoalCriteriaPreviewProps> = ({ achiev
         }
     });
 
-    const handleOpen = useCallback(() => {
-        if (!popupVisible) {
-            setPopupVisible(true);
-        }
-    }, [popupVisible]);
+    const handleOpen = useCallback(
+        (e: MouseEvent<HTMLSpanElement>) => {
+            // block following a link that hangs on the entire table row
+            e.preventDefault();
+
+            // block opening GoalPreview
+            e.stopPropagation();
+
+            if (!popupVisible) {
+                setPopupVisible(true);
+            }
+        },
+        [popupVisible],
+    );
 
     return (
         <>
@@ -169,6 +178,10 @@ export const GoalCriteriaPreview: React.FC<GoalCriteriaPreviewProps> = ({ achiev
                 offset={[10, 10]}
                 arrow={false}
                 onClickCapture={() => setPopupVisible(false)}
+                onClick={(e) => {
+                    // block opening GoalPreview
+                    e.stopPropagation();
+                }}
             >
                 <div className={classes.NewGoalCriteria} ref={wrapperRef}>
                     <Text className={classes.NewGoalCriteriaTitle} as="h4">