Merge pull request twentyhq#1 from AyushAgrawal-A2/ayush/twentyhq#1826

Fix: onMouseEnter retrigger
AyushAgrawal-A2 · Oct 8, 2023 · 47f33b2 · 47f33b2
2 parents df47fb5 + cba4888
commit 47f33b2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useContext } from 'react';
+import { ReactElement, useContext, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
@@ -58,6 +58,10 @@ export const TableCellContainer = ({
 }: EditableCellProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
 
+  const [isHovered, setIsHovered] = useState(false);
+
+  const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
+
   const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
 
   const { openTableCell, closeTableCell } = useTableCell();
@@ -68,21 +72,25 @@ export const TableCellContainer = ({
   };
 
   const handleContainerMouseEnter = () => {
-    setSoftFocusOnCurrentTableCell();
+    if (!isHovered) {
+      setIsHovered(true);
+      setSoftFocusOnCurrentTableCell();
+    }
   };
+
   const handleContainerMouseLeave = () => {
+    setIsHovered(false);
     closeTableCell();
   };
 
   const editModeContentOnly = useIsFieldInputOnly();
-  const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
 
   const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
 
   const isEmpty = useIsFieldEmpty();
 
   const showButton =
-    buttonIcon &&
+    !!buttonIcon &&
     hasSoftFocus &&
     !isCurrentTableCellInEditMode &&
     !editModeContentOnly &&

diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx
@@ -19,7 +19,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
   padding-right: ${({ theme }) => theme.spacing(1)};
   width: 100%;
   ${(props) =>
-    props.softFocus || props.isHovered
+    props.softFocus
       ? `background: ${props.theme.background.transparent.secondary};
       border-radius: ${props.theme.border.radius.sm};
       outline: 1px solid ${props.theme.font.color.extraLight};`
@@ -39,14 +39,12 @@ export const TableCellDisplayContainer = ({
   softFocus,
   onClick,
   scrollRef,
-  isHovered,
 }: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
   <StyledEditableCellDisplayModeOuterContainer
     data-testid={
       softFocus ? 'editable-cell-soft-focus-mode' : 'editable-cell-display-mode'
     }
     onClick={onClick}
-    isHovered={isHovered}
     softFocus={softFocus}
     ref={scrollRef}
   >