fix: reset form in stepper on each step #3722

jog1t · 2026-01-01T00:43:54Z

TL;DR

Added form reset functionality when navigating between steps and added debugging for form state.

What changed?

Added form.reset() with options to keep values but clear errors when moving to the next step in the stepper form

How to test?

Navigate through a stepper form and verify that errors are cleared when moving to the next step
Confirm that form values are preserved when navigating between steps
Check the browser console to see the form state being logged

Why make this change?

This change improves the user experience by clearing validation errors when users move to the next step while preserving their input values. The console log helps with debugging form state during development.

vercel · 2026-01-01T00:43:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
rivet-inspector	Ready	Preview, Comment	Jan 1, 2026 0:49am

3 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
rivet-cloud	Ignored		Jan 1, 2026 0:49am
rivet-site	Ignored	Preview	Jan 1, 2026 0:49am
rivetkit-serverless	Skipped		Jan 1, 2026 0:49am

jog1t · 2026-01-01T00:44:10Z

fix: reset form in stepper on each step #3722 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

graphite-app · 2026-01-01T00:44:22Z

Merge activity

Jan 1, 12:44 AM UTC: jog1t added this pull request to the Graphite merge queue.
Jan 1, 12:44 AM UTC: jog1t removed this pull request from the Graphite merge queue.
Jan 1, 12:44 AM UTC: CI is running for this pull request on a draft pull request (#3723) due to your merge queue CI optimization settings.
Jan 1, 12:48 AM UTC: jog1t added this pull request to the Graphite merge queue.
Jan 1, 12:48 AM UTC: CI is running for this pull request on a draft pull request (#3724) due to your merge queue CI optimization settings.
Jan 1, 12:49 AM UTC: Merged by the Graphite merge queue via draft PR: #3724.

### TL;DR Added form reset functionality when navigating between steps and added debugging for form state. ### What changed? - Added `form.reset()` with options to keep values but clear errors when moving to the next step in the stepper form - Added a console log to display the form state in the `StepPanel` component ### How to test? 1. Navigate through a stepper form and verify that errors are cleared when moving to the next step 2. Confirm that form values are preserved when navigating between steps 3. Check the browser console to see the form state being logged ### Why make this change? This change improves the user experience by clearing validation errors when users move to the next step while preserving their input values. The console log helps with debugging form state during development.

graphite-app · 2026-01-01T00:45:11Z

Graphite Automations

"Test" took an action on this PR • (01/01/26)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.

claude · 2026-01-01T00:45:53Z

Code Review

Thank you for this PR! I've reviewed the changes and have some feedback on the implementation.

Issues Found

1. Critical: Console.log left in production code

Location: frontend/src/app/forms/stepper-form.tsx:183

This debug log should be removed before merging. Console logs in production code can leak sensitive form data to browser consoles, create unnecessary performance overhead, and clutter the console for end users.

Fix: Remove the console.log(form.formState) line entirely.

2. Logic Issue: Form reset behavior may not work as expected

Location: frontend/src/app/forms/stepper-form.tsx:115-118

According to React Hook Form documentation, calling form.reset(undefined, { keepValues: true }) creates a logical contradiction. When you pass undefined as the first argument, you're telling the form to reset to its defaultValues. The keepValues: true option then says keep the current values.

Expected behavior: This will likely reset the form to defaultValues and ignore keepValues: true.

Suggested fix: Use form.clearErrors() instead to just clear errors while keeping values intact.

3. Consistency: Same pattern already exists in Previous button

Location: frontend/src/app/forms/stepper-form.tsx:195-198

The Previous button already uses the same reset pattern. This suggests the pattern should be reconsidered for both locations.

Testing Recommendations

Test with validation errors to ensure errors are actually cleared when moving to the next step
Test with complex form values to verify that nested objects and arrays are preserved
Test the Previous button to ensure the same behavior works correctly in reverse
Test on last step to verify the form submission still works correctly with all accumulated values

Summary

Must fix: Remove console.log
Should fix: Use form.clearErrors() instead of form.reset(undefined, { keepValues: true })
Good: The intent to clear errors between steps is correct and improves UX

Please address these issues and I'll be happy to review again!

claude · 2026-01-01T00:47:15Z

PR Review

Summary

This PR adds form reset functionality when navigating between steps in the stepper form. The change clears validation errors while preserving form values, improving the user experience.

Code Quality & Best Practices

✅ Positive aspects:

The use of form.reset() with keepValues: true and keepErrors: false is the correct approach for this use case
The implementation is consistent with the existing pattern already used in the "Previous" button (lines 194-197)
The change is minimal and focused on the specific issue

Issues & Concerns

⚠️ Discrepancy in PR description:
The PR description mentions "Added a console log to display the form state in the StepPanel component", but no console log is present in the diff. The only change in StepPanel is an extra blank line (line 182). This appears to be either:

A leftover debug statement that was removed before committing (good!)
An error in the PR description (should be updated)

⚠️ Potential bug - Form validation state:
There's a subtle issue with the current implementation. When form.reset(undefined, { keepValues: true }) is called:

It resets the form state but keeps the current field values
However, passing undefined as the first argument means it will try to reset to the original defaultValues
Since the form is accumulating values in ref.current (line 110), there's a mismatch between what's stored in ref.current and what's in the form state after reset

Recommended fix:

const handleSubmit = (values: z.infer<JoinStepSchemas<Steps>>) => {
    ref.current = { ...ref.current, ...values };
    if (stepper.isLast) {
        return onSubmit?.({ values: ref.current, form, stepper });
    }
    stepper.next();
    form.reset(ref.current, {
        keepErrors: false,
        keepValues: true,
    });
};

This ensures the form is reset with the accumulated values from all previous steps, maintaining consistency.

⚠️ Schema validation concern:
When moving to the next step, the resolverSchema changes (line 99). After calling form.reset(), the form will validate against the new step's schema. If previous step values don't match the new step's schema, this could cause issues. Consider whether validation should be triggered immediately after reset or deferred.

Testing Recommendations

The PR description provides basic testing steps, but consider adding:

Test case: Fill out step 1 with validation errors, then fix and proceed to step 2, go back to step 1 - verify errors don't reappear
Test case: Multi-step form with interdependent fields across steps
Consider adding automated tests for this behavior if not already present

Minor Style Issue

The extra blank line added at line 182 in StepPanel appears to be unintentional formatting. While not harmful, it's not adding value.

Verdict

The core idea of this PR is sound and improves UX. However, the implementation should pass ref.current to form.reset() instead of undefined to maintain consistency between the accumulated form values and the form state.

Recommendation: Request changes to fix the form reset argument.

### TL;DR Added form reset functionality when navigating between steps and added debugging for form state. ### What changed? - Added `form.reset()` with options to keep values but clear errors when moving to the next step in the stepper form ### How to test? 1. Navigate through a stepper form and verify that errors are cleared when moving to the next step 2. Confirm that form values are preserved when navigating between steps 3. Check the browser console to see the form state being logged ### Why make this change? This change improves the user experience by clearing validation errors when users move to the next step while preserving their input values. The console log helps with debugging form state during development.

pkg-pr-new · 2026-01-01T00:49:03Z

More templates

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3722

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3722

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3722

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3722

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3722

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3722

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3722

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3722

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3722

commit: ccfd423

vercel bot temporarily deployed to Preview – rivetkit-serverless January 1, 2026 00:43 Inactive

jog1t marked this pull request as ready for review January 1, 2026 00:44

graphite-app bot assigned jog1t Jan 1, 2026

fix: reset form in stepper on each step

ccfd423

jog1t force-pushed the 01-01-fix_reset_form_in_stepper_on_each_step branch from f7b2779 to ccfd423 Compare January 1, 2026 00:46

vercel bot temporarily deployed to Preview – rivetkit-serverless January 1, 2026 00:46 Inactive

vercel bot deployed to Preview – rivet-inspector January 1, 2026 00:49 View deployment

graphite-app bot closed this Jan 1, 2026

graphite-app bot deleted the 01-01-fix_reset_form_in_stepper_on_each_step branch January 1, 2026 00:49

claude bot mentioned this pull request Jan 1, 2026

[Graphite MQ] Draft PR GROUP:spec_430afc (PRs 3722) #3724

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: reset form in stepper on each step #3722

fix: reset form in stepper on each step #3722

Uh oh!

jog1t commented Jan 1, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 1, 2026 •

edited

Loading

Uh oh!

jog1t commented Jan 1, 2026

Uh oh!

graphite-app bot commented Jan 1, 2026 •

edited

Loading

Uh oh!

graphite-app bot commented Jan 1, 2026

Uh oh!

claude bot commented Jan 1, 2026

Uh oh!

claude bot commented Jan 1, 2026

Uh oh!

pkg-pr-new bot commented Jan 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: reset form in stepper on each step #3722

fix: reset form in stepper on each step #3722

Uh oh!

Conversation

jog1t commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TL;DR

What changed?

How to test?

Why make this change?

Uh oh!

vercel bot commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jog1t commented Jan 1, 2026

How to use the Graphite Merge Queue

Uh oh!

graphite-app bot commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

graphite-app bot commented Jan 1, 2026

Graphite Automations

Uh oh!

claude bot commented Jan 1, 2026

Code Review

Issues Found

1. Critical: Console.log left in production code

2. Logic Issue: Form reset behavior may not work as expected

3. Consistency: Same pattern already exists in Previous button

Testing Recommendations

Summary

Uh oh!

claude bot commented Jan 1, 2026

PR Review

Summary

Code Quality & Best Practices

Issues & Concerns

Testing Recommendations

Minor Style Issue

Verdict

Uh oh!

pkg-pr-new bot commented Jan 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jog1t commented Jan 1, 2026 •

edited

Loading

vercel bot commented Jan 1, 2026 •

edited

Loading

graphite-app bot commented Jan 1, 2026 •

edited

Loading