diff --git a/src/__tests__/ReflectionMode.test.tsx b/src/__tests__/ReflectionMode.test.tsx index 0a37e75..0eae8de 100644 --- a/src/__tests__/ReflectionMode.test.tsx +++ b/src/__tests__/ReflectionMode.test.tsx @@ -115,4 +115,26 @@ describe('ReflectionMode', () => { expect(dialog).toHaveAttribute('aria-modal', 'true') expect(dialog).toHaveAttribute('aria-label', expect.stringContaining('Test')) }) + + it('preserves all items when adding rapidly without re-render between adds', async () => { + const user = userEvent.setup() + const onUpdate = vi.fn() + + // Render with the initial framework — never re-render with updated props + // This simulates rapid adds where React hasn't re-rendered between them + render() + + const input = screen.getByPlaceholderText('Add to "Start"...') + + // Add two items rapidly without any re-render in between + await user.type(input, 'First{Enter}') + await user.type(input, 'Second{Enter}') + + // The second onUpdate call should include BOTH items, not just "Second" + expect(onUpdate).toHaveBeenCalledTimes(2) + const secondUpdate = onUpdate.mock.calls[1][0] + expect(secondUpdate.quadrants[0].items).toHaveLength(2) + expect(secondUpdate.quadrants[0].items[0].text).toBe('First') + expect(secondUpdate.quadrants[0].items[1].text).toBe('Second') + }) }) diff --git a/src/components/ReflectionMode.tsx b/src/components/ReflectionMode.tsx index 64dcfca..78a1d3c 100644 --- a/src/components/ReflectionMode.tsx +++ b/src/components/ReflectionMode.tsx @@ -29,16 +29,22 @@ export default function ReflectionMode({ framework, onUpdate, onExit }: Reflecti } }, []) + const frameworkRef = useRef(framework) + useEffect(() => { + frameworkRef.current = framework + }, [framework]) + const handleAdd = useCallback( (e: React.FormEvent) => { e.preventDefault() if (!text.trim()) return - const updated = addItem(framework, activeQuadrant, createItem(text.trim())) + const updated = addItem(frameworkRef.current, activeQuadrant, createItem(text.trim())) + frameworkRef.current = updated onUpdate(updated) setText('') inputRef.current?.focus() }, - [text, activeQuadrant, framework, onUpdate], + [text, activeQuadrant, onUpdate], ) const handleKeyDown = useFocusTrap(overlayRef, onExit)