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:

// Add ref to track cells currently being edited
const currentlyEditingCellsRef = useRef(new Set<string>());

// 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:

// Add ref to track cells currently being edited with timestamps
const currentlyEditingCellsRef = useRef(new Map<string, number>());

// Add ref to track validation promises
const validationPromisesRef = useRef<Map<string, Promise<void>>>(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<void>((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:

Implement a more robust state management system for cell edits that can survive validation cycles
Consider disabling validation during active editing
Implement a proper "dirty state" tracking system for cells

4.6 KiB Raw Blame History