Fixing Form State Preservation After Failed Submissions

Release: v1.0.407
Category: Error UX (ERR-17)

The Problem

Filling in a form — whether it's updating your email address, tweaking organisation settings, or submitting a piece of feedback — and then hitting an error, only to find your input has vanished, is a frustrating experience. Unfortunately, that was possible in a handful of places across the platform.

The root cause was inconsistent state management across smaller, secondary forms. The core quarterly submission workflow had always used React controlled components with explicit error handling, so field values survived failed submissions there. But several supporting forms (feedback-widget.tsx, profile-form.tsx, org-settings-form.tsx, and email-change-form.tsx) were using local state patterns that did not explicitly hold onto values when an async submission failed.

In the case of the feedback widget, the server-side route (feedback/route.ts) was catching errors correctly — but the client component had no contract for what to do with that error: it could clear the form rather than surfacing the failure.

What We Fixed

Consistent use of React Hook Form

All affected forms have been audited and updated to use React Hook Form (or an equivalent controlled pattern). React Hook Form keeps field values in a stable internal store that is not cleared by a failed submission. The form only resets when the developer explicitly calls reset() — which we now do only on a successful submission.

Persistent error state in the feedback widget

Previously, a server error during feedback submission could leave the widget in an ambiguous state. Now:

1. The error is caught and stored in form state.
2. A clear, human-readable error message is displayed below the submit button.
3. The message persists until the user successfully submits or navigates away — it does not auto-dismiss.
4. All field values remain intact so the user can simply retry.

Forms covered by this fix

Form	File
Feedback widget	src/components/feedback-widget.tsx
Profile settings	profile-form.tsx
Organisation settings	org-settings-form.tsx
Email change	email-change-form.tsx

Note: The quarterly submission dashboard, income/expense entry forms, and HMRC submission screens were already handling error state correctly and are unaffected by this change.

Why It Matters for MTD Compliance

For a platform handling tax submissions, data integrity is non-negotiable. Losing a user's carefully entered figures — or making them think a submission succeeded when it didn't — could lead to missed deadlines or incorrect HMRC filings. These fixes ensure that every failure is visible, every entered value is preserved, and users always have a clear path to retry.

What You'll Notice

• If a form submission fails for any reason (network error, server-side validation, timeout), your input stays in the form fields.
• An error message appears and stays visible until you successfully submit or leave the page.
• No silent resets, no lost work.