fix(GoalListItem): keyboard hover

taskany-inc · Feb 1, 2024 · 1a2da59 · 1a2da59
1 parent ab7ec21
commit 1a2da59
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/GoalListItem/GoalListItem.module.css b/src/components/GoalListItem/GoalListItem.module.css
@@ -10,7 +10,7 @@
     color: var(--text-secondary);
 }
 
-.Row:hover {
+.Row_hovered, .Row:hover {
     border: 1px solid var(--layer-border-hover);
     background: var(--layer-hover);
 }

diff --git a/src/components/GoalListItem/GoalListItem.tsx b/src/components/GoalListItem/GoalListItem.tsx
@@ -6,13 +6,14 @@ import s from './GoalListItem.module.css';
 
 interface GoalListItemProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
+    hovered?: boolean;
     className?: string;
     onClick?: MouseEventHandler<HTMLElement>;
 }
 
-export const GoalListItem: FC<GoalListItemProps> = ({ children, selected, className, ...rest }) => {
+export const GoalListItem: FC<GoalListItemProps> = ({ children, selected, hovered, className, ...rest }) => {
     return (
-        <TableRow className={cn(s.Row, { [s.Row_selected]: selected }, className)} {...rest}>
+        <TableRow className={cn(s.Row, { [s.Row_selected]: selected, [s.Row_hovered]: hovered }, className)} {...rest}>
             {children}
         </TableRow>
     );

diff --git a/src/components/GoalTableList/GoalTableList.tsx b/src/components/GoalTableList/GoalTableList.tsx
@@ -140,7 +140,8 @@ export const GoalTableList = <T extends Partial<NonNullable<GoalByIdReturnType>>
                         renderItem={({ active, hovered: _, ...props }) => (
                             <GoalListItem
                                 onClick={onGoalPreviewShow(row.goal)}
-                                selected={selectedGoalResolver?.(row.goal?.id as string) || active}
+                                selected={selectedGoalResolver?.(row.goal?.id as string)}
+                                hovered={active}
                                 {...props}
                             >
                                 {row.list.map(({ content, width, className }, index) => (