fix: data spreadsheet blur (carbon-design-system#5477)

anamikaanu96 · Jun 18, 2024 · de3a830 · de3a830
1 parent 504841c
commit de3a830
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx
@@ -182,6 +182,7 @@ export let DataSpreadsheet = React.forwardRef(
     const [isEditing, setIsEditing] = useState(false);
     const [cellEditorValue, setCellEditorValue] = useState('');
     const [headerCellHoldActive, setHeaderCellHoldActive] = useState(false);
+    const isBlurSpreadsheet = useRef(false);
     const [isActiveHeaderCellChanged, setIsActiveHeaderCellChanged] =
       useState<boolean>(false);
     const [activeCellInsideSelectionArea, setActiveCellInsideSelectionArea] =
@@ -190,6 +191,7 @@ export let DataSpreadsheet = React.forwardRef(
       usePreviousValue({
         activeCellCoordinates,
         isEditing,
+        cellEditorValue,
       }) || {};
     const cellSizeValue = getCellSize(cellSize);
     const cellEditorRef = useRef<HTMLTextAreaElement>();
@@ -309,9 +311,21 @@ export let DataSpreadsheet = React.forwardRef(
           setIsActiveHeaderCellChanged((prev) => !prev);
         }
       }
+      // For when we edit and focus out of data spreadsheet
+      if (
+        isEditing &&
+        previousState.activeCellCoordinates &&
+        isBlurSpreadsheet.current
+      ) {
+        setActiveCellContent(previousState.cellEditorValue);
+        isBlurSpreadsheet.current = false;
+        removeCellEditor();
+      }
     }, [
+      isBlurSpreadsheet,
       activeCellCoordinates,
       previousState?.activeCellCoordinates,
+      previousState?.cellEditorValue,
       updateData,
       rows,
       isEditing,
@@ -352,6 +366,7 @@ export let DataSpreadsheet = React.forwardRef(
     });
 
     useSpreadsheetOutsideClick({
+      isBlurSpreadsheet,
       spreadsheetRef,
       setActiveCellCoordinates,
       setSelectionAreas,

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js b/packages/ibm-products/src/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js
@@ -11,6 +11,7 @@ import { removeCellSelections } from '../utils/removeCellSelections';
 
 // Click outside useEffect for spreadsheet
 export const useSpreadsheetOutsideClick = ({
+  isBlurSpreadsheet,
   spreadsheetRef,
   blockClass = `${pkg.prefix}--data-spreadsheet`,
   setActiveCellCoordinates,
@@ -33,18 +34,19 @@ export const useSpreadsheetOutsideClick = ({
       ) {
         return;
       }
+      isBlurSpreadsheet.current = true;
       setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
       removeCellSelections({ spreadsheetRef });
       setContainerHasFocus(false);
-      removeCellEditor();
     };
     document.addEventListener('click', handleOutsideClick);
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [
+    isBlurSpreadsheet,
     spreadsheetRef,
     removeActiveCell,
     blockClass,

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/types/index.ts b/packages/ibm-products/src/components/DataSpreadsheet/types/index.ts
@@ -13,6 +13,7 @@ export interface ActiveCellCoordinates {
 }
 
 export interface PrevState {
+  cellEditorValue?: string;
   activeCellCoordinates?: ActiveCellCoordinates;
   isEditing?: boolean;
   selectionAreaData?: object[];