# Multiple Cell Edit Issue Implementation ## Issue Being Addressed **Multiple Cell Edit Issue**: When you enter values in 2+ cells before validation finishes, contents from all edited cells get erased when validation finishes. ## Implementation Attempts ### Attempt 1: Fix Multiple Cell Edit Issue (First Approach) **Approach**: - Added a tracking mechanism using a Set to keep track of cells that are currently being edited - Modified the `flushPendingUpdates` function to preserve values of cells being edited - Added cleanup of editing state after validation completes **Changes Made**: ```typescript // Add ref to track cells currently being edited const currentlyEditingCellsRef = useRef(new Set()); // Update a row's field value const updateRow = useCallback((rowIndex: number, key: T, value: any) => { // Add this cell to currently editing cells const cellKey = `${rowIndex}-${key}`; currentlyEditingCellsRef.current.add(cellKey); // ...existing code... // After validation completes, remove this cell from currently editing list setTimeout(() => { currentlyEditingCellsRef.current.delete(cellKey); }, 100); }, []); // Modify flushPendingUpdates to respect currently editing cells const flushPendingUpdates = useCallback(() => { // ...existing code... if (dataUpdates.length > 0) { setData(prev => { // ...existing code... dataUpdates.forEach((row, index) => { if (index < newData.length) { const updatedRow = { ...row }; // Check if any fields in this row are currently being edited // If so, preserve their current values in the previous data Object.keys(prev[index] || {}).forEach(key => { const cellKey = `${index}-${key}`; if (currentlyEditingCellsRef.current.has(cellKey)) { // Keep the value from the previous state for this field updatedRow[key] = prev[index][key]; } }); newData[index] = updatedRow; } }); return newData; }); } }, []); ``` **Result**: - Slight improvement - the first value entered was saved, but any subsequent values still got erased ### Attempt 2: Fix Multiple Cell Edit Issue (Second Approach) **Approach**: - Completely revised the cell editing tracking system - Used a Map with timestamps to track editing cells more accurately - Added proper Promise-based tracking for cell validation - Increased timeout from 100ms to 1000ms - Made cleanup more robust by checking if it's still the same editing session **Changes Made**: ```typescript // Add ref to track cells currently being edited with timestamps const currentlyEditingCellsRef = useRef(new Map()); // Add ref to track validation promises const validationPromisesRef = useRef>>(new Map()); // Update a row's field value const updateRow = useCallback((rowIndex: number, key: T, value: any) => { // Mark this cell as being edited with the current timestamp const cellKey = `${rowIndex}-${key}`; currentlyEditingCellsRef.current.set(cellKey, Date.now()); // ...existing code... // Create a validation promise const validationPromise = new Promise((resolve) => { setTimeout(() => { try { validateRow(rowIndex); } finally { resolve(); } }, 0); }); validationPromisesRef.current.set(cellKey, validationPromise); // When validation is complete, remove from validating cells validationPromise.then(() => { // ...existing code... // Keep this cell in the editing state for a longer time setTimeout(() => { if (currentlyEditingCellsRef.current.has(cellKey)) { currentlyEditingCellsRef.current.delete(cellKey); } }, 1000); // Keep as "editing" for 1 second }); }, []); ``` **Result**: - Worse than the first approach - now all values get erased, including the first one ## Root Causes (Hypothesized) - The validation process might be updating the entire data state, causing race conditions with cell edits - The timing of validation completions might be problematic - State updates might be happening in a way that overwrites user changes - The cell state tracking system is not robust enough to prevent overwrites ## Next Steps The issue requires a more fundamental approach than just tweaking the editing logic. We need to: 1. Implement a more robust state management system for cell edits that can survive validation cycles 2. Consider disabling validation during active editing 3. Implement a proper "dirty state" tracking system for cells