Volleyball Elite Academy development update
|
Volleyball Elite Academy
Fix Command Center Frozen Page
|
Fix Command Center Frozen PageVolleyball Elite Academy — Development Update • May 17, 2026
Fix Command Center Frozen Page
What & Why On (and likely other routes), the entire page becomes unclickable: and are stuck on , the Google Translate selector and every link/button stop responding, and the Issues panel reports 22 JavaScript errors on plus accessibility violations on the registrations forms. The root cause is the mobile sidebar Sheet (Radix Dialog) entering an "open" state and never running its close handler — most likely because one of those 22 errors throws mid-render and prevents Radix from removing its scroll/pointer lock. We need to stop the page from getting wedged and clean up the underlying errors and a11y issues so it does not happen again.
Done looks like
- Loading on desktop and mobile leaves the page fully interactive: dropdowns, sidebar links, the Google Translate selector, and tab switches all respond.
- no longer has or lingering after navigating into or out of the Registrations tab.
- The 22 console errors on Command Center are gone (or reduced to known, harmless warnings) and any remaining error inside the mobile sidebar or a dialog cannot leave the body in a locked state.
- The Issues panel shows zero "form field should have an id or name attribute" and zero "No label associated with a form field" violations on the Registrations tab.
- Verified on the deployed site at elitevolleyball.training, not just locally.
Out of scope
- Redesigning the Command Center layout or the mobile navigation.
- Replacing Radix UI or shadcn Sheet/Dialog primitives.
- Fixing unrelated accessibility issues on pages other than Command Center → Registrations.
- Changes to the Google Translate widget itself (only verify it becomes clickable again).
Steps 1. Reproduce and capture the failure. Load in dev and on the deployed site, confirm lands on , and collect the 22 console errors from the Application → Issues panel so we know exactly which throw is triggering the locked state. 2. Fix the root-cause errors on the Registrations tab. Walk through each error from step 1 and fix it at the source (bad data access, missing query result handling, undefined props, etc.). Most or all of the 22 errors should be eliminated. 3. Harden the mobile sidebar Sheet against future lockups. Make sure the Sheet that wraps the mobile sidebar cannot leave in a / state if a child throws — e.g. an error boundary around the Sheet content that forces on error, plus a route-change effect that closes the mobile sidebar whenever the location changes. The fix must work for any page that uses the mobile sidebar, not just Registrations. 4. Clean up the form accessibility violations on Registrations. Add proper and attributes to the 2 flagged form fields and associate each of the 7 flagged labels with their inputs (either by nesting the input inside the label or by matching to the input's ). Use the existing shadcn / / pattern where possible so this stays consistent with the rest of the app. 5. Verify end-to-end. After deploying, reopen on desktop and mobile widths, confirm the page stays interactive, the Issues panel is clean, and the Google Translate selector works again.
Relevant files - - - - -
|
Volleyball Elite Academy Reply to this email — we read every reply. You received this because you have an account with Volleyball Elite Academy. elitevolleyball.training |
|
No comments:
Post a Comment