Fix: Keep ConfigPage tabs mounted to preserve form state
Previously, the tab content wrapper used 'key={tab}' which caused React to
unmount and remount the entire subtree when switching tabs. This destroyed
all component state, including unsaved form data and pending auto-saves.
Changes:
- Removed 'key={tab}' from the wrapper div
- All tab panels now render at page initialization
- Inactive tabs use CSS 'display: none' to hide without unmounting
- Tabs remain mounted throughout the page lifetime
- Users can now switch tabs without losing form input
Updated ConfigPage.test.tsx to reflect that inactive tabs remain in the DOM
(just hidden with CSS) rather than being removed entirely.
Documentation: Added 'Tab Panels' section to Web-Development.md
explaining the rule and rationale.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,15 +1,3 @@
|
||||
|
||||
### ✅ TASK-BUG-01 — Infinite Re-Fetch Loop in `useJailConfigs` — DONE
|
||||
|
||||
**Fix Summary**
|
||||
Wrapped the `onSuccess` callback in `useCallback` with empty dependencies in `frontend/src/hooks/useJailConfigs.ts` (lines 33-35). The inline callback was creating a new reference on every render, which caused `useListData`'s internal `refresh` function to be recreated (since `onSuccess` is in its deps), which triggered the `useEffect` again, causing an infinite fetch loop.
|
||||
|
||||
Added comprehensive test coverage in `frontend/src/hooks/__tests__/useJailConfigs.test.ts` to verify the hook no longer triggers infinite refetches. Updated `Docs/Refactoring.md` with documentation explaining the `onSuccess` stability requirement for all `useListData` callers.
|
||||
|
||||
Commit: `de8af09a3da36dbf24b56fa28656673b232b5e91`
|
||||
|
||||
---
|
||||
|
||||
### TASK-BUG-02 — `ConfigPage` Tab Switch Destroys All Form State
|
||||
|
||||
**Where found**
|
||||
@@ -213,7 +201,6 @@ None required.
|
||||
**Why this is needed**
|
||||
Typing `"500"` in the Lines field currently fires three HTTP requests (`"5"`, `"50"`, `"500"`). Each request fetches potentially hundreds of log lines and serializes them, adding unnecessary backend load.
|
||||
|
||||
|
||||
---
|
||||
|
||||
### TASK-ABORT-01 — Missing `signal` Parameter on Multiple API Functions
|
||||
@@ -640,4 +627,4 @@ Remove the `console.log` call.
|
||||
None required.
|
||||
|
||||
**Why this is needed**
|
||||
Debug logs in test files pollute the test runner output and make it harder to spot real failures or warnings.
|
||||
Debug logs in test files pollute the test runner output and make it harder to spot real failures or warnings.
|
||||
Reference in New Issue
Block a user