fix: stale closure causing wrong cell to flash on edit mode entry
- Add position to useEffect dependency array in useCursor - Fixes issue where old position was captured in handleKeyDown closure - Edit mode entry now correctly validates current cell position
This commit is contained in:
@@ -877,6 +877,19 @@ User sees '5' in the cell
|
||||
|
||||
**Result**: ✅ Golden glow persists when typing digits in edit mode
|
||||
|
||||
### Issue 2: Wrong Cell Flashing Red on Edit Mode Entry
|
||||
|
||||
**Problem**: After attempting to enter edit mode on a given cell (red flash), moving to an empty cell and pressing `i` would flash the *previous* given cell red instead of entering edit mode on the current cell.
|
||||
|
||||
**Root Cause**: Stale closure in `useEffect`. The `handleKeyDown` function captured `position` from when the effect was created. The dependency array was `[gameStatus, mode]` but didn't include `position`. When position changed, the event handler wasn't recreated, so it still used the old position coordinates.
|
||||
|
||||
**Solution**: Add `position` to the `useEffect` dependency array.
|
||||
|
||||
**Changes**:
|
||||
- `useCursor.ts`: Changed dependency array from `[gameStatus, mode]` to `[gameStatus, mode, position]`
|
||||
|
||||
**Result**: ✅ Edit mode entry now correctly checks and flashes the current cell position
|
||||
|
||||
### Next Steps
|
||||
- Phase 40.3.4: Add erase functionality (x, Backspace, Delete)
|
||||
- Phase 40.3.5: Add replace mode (r)
|
||||
|
||||
@@ -165,7 +165,7 @@ export function useCursor(gameStatusManager: GameStatusManager, containerRef: Re
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [gameStatus, mode]);
|
||||
}, [gameStatus, mode, position]);
|
||||
|
||||
const cursor: CursorManager = {
|
||||
position: () => position,
|
||||
|
||||
Reference in New Issue
Block a user