You are working on a dashboard application that features three distinct modals:
- Login Modal
- Settings Modal
- Confirmation Modal
The business requirement states that only one modal can be active/open at any given time. Furthermore, pressing the Escape key should instantly close whichever modal is currently open.
The Bug
The current implementation in src/ModalManager.jsx is broken and exhibits severe event listener bugs:
- Pressing
Escape often fails to close the active modal, closes the wrong modal, or causes erratic state updates.
- Event listeners are being registered repeatedly without proper cleanup, accumulating duplicate handlers on every render.
- Handlers capture stale state values due to incorrect dependency management in
useEffect.
- Unmounting components leaves dangling
keydown event listeners on the global window object.
Requirements & Acceptance Criteria
- Single Active Modal: Ensure state transitions strictly enforce that only one modal (
"login", "settings", or "confirm") is active at a time, or null when none are open.
- Global Escape Key Handler: Register a single global
keydown event listener for the Escape key that reliably closes whichever modal is currently active.
- Stale Closure Prevention: Ensure the keyboard event listener always reads the up-to-date active modal state.
- Proper Listener Cleanup: Ensure event listeners are properly removed when components re-render or unmount to avoid memory leaks and duplicate triggers.
Files to Modify
src/ModalManager.jsx — Fix the state management and useEffect lifecycle/event listener registration logic.