How can I prevent values from bleeding between steps in a Next.js multi-step form?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm building a multi-step signup form in Next.js using shadcn/ui, react-hook-form, and zod. The issue is that after completing step 1 and moving to step 2, when I click the "previous" button to return to step 1, values from step 2 appear in step 1 fields.

I tried removing shadcn/ui forms and relying solely on react-hook-form and zod, but the problem still persists. Below is the code for the signup form and associated utilities and validation.

The signup form

JAVASCRIPT
"use client";

import { useState, useEffect } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { ChevronRight, ChevronLeft } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import {
  registerSchema,
  EntityCategory,
  type RegisterStep1,
  type RegisterStep2,
} from "./validation";
import { getBrowserTimezone, countryTimezones } from "./timezone";

export default function SignupForm() {
  const [step, setStep] = useState(1);
  const [availableTimezones, setAvailableTimezones] = useState<
    { name: string; utc: string }[]
  >([]);

  const step1Form = useForm<RegisterStep1>({
    resolver: zodResolver(registerSchema.step1),
    defaultValues: {
      name: "",
      entity: "",
      category: undefined,
      country: "",
      timezone: "",
      region: "",
    },
  });

  const step2Form = useForm<RegisterStep2>({
    resolver: zodResolver(registerSchema.step2),
    defaultValues: {
      city: "",
      email: "",
      contact: "",
      password: "",
      confirm_password: "",
    },
  });

  useEffect(() => {
    const browserTz = getBrowserTimezone();
    step1Form.setValue("timezone", browserTz.utc);
  }, []);

  const onStep1Submit = async (data: RegisterStep1) => {
    const result = await registerSchema.step1.safeParseAsync(data);
    if (result.success) {
      setStep(2);
    }
  };

  const onStep2Submit = async (data: RegisterStep2) => {
    const step1Data = await step1Form.getValues();
    const step2Result = await registerSchema.step2.safeParseAsync(data);

    if (step2Result.success) {
      const formData = {
        ...step1Data,
        ...data,
      };
      try {
        // Add your API call here
        console.log("Form submitted:", formData);
      } catch (error) {
        console.error("Error submitting form:", error);
      }
    }
  };

  const handleCountryChange = (value: string) => {
    step1Form.setValue("country", value);
    const tzs = countryTimezones[value] || [];
    setAvailableTimezones(tzs);
    if (tzs.length === 1) {
      step1Form.setValue("timezone", tzs[0].utc);
    }
  };

  return (
    <Card className="max-w-lg mx-auto w-[500px] min-w-[300px]">
      <CardHeader>
        <CardTitle className="text-2xl font-bold text-center">
          Company Registration {step === 1 ? "- Basic Info" : "- Details"}
        </CardTitle>
        <div className="flex justify-center space-x-2 mt-4">
          <div
            className={`h-2 w-16 rounded ${step === 1 ? "bg-primary" : "bg-muted"}`}
          />
          <div
            className={`h-2 w-16 rounded ${step === 2 ? "bg-primary" : "bg-muted"}`}
          />
        </div>
      </CardHeader>
      <CardContent>
        {step === 1 ? (
          <Form {...step1Form}>
            <form
              onSubmit={step1Form.handleSubmit(onStep1Submit)}
              className="space-y-4"
            >
              <FormField
                control={step1Form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Company Name</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter Company Name" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={step1Form.control}
                name="entity"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Entity Name</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter Entity Name" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={step1Form.control}
                name="category"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Category</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select a category" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {Object.entries(EntityCategory).map(([key, value]) => (
                          <SelectItem key={key} value={value}>
                            {value}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={step1Form.control}
                  name="country"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Country Code</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Select country"
                          maxLength={2}
                          {...field}
                          onChange={(e) => {
                            const value = e.target.value.toUpperCase();
                            handleCountryChange(value);
                            field.onChange(value);
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={step1Form.control}
                  name="timezone"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Timezone</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                        disabled={availableTimezones.length === 0}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select timezone" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {availableTimezones.map((tz) => (
                            <SelectItem key={tz.name} value={tz.utc}>
                              {tz.name} ({tz.utc})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <FormField
                control={step1Form.control}
                name="region"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Region</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter region" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full">
                Next <ChevronRight className="ml-2 h-4 w-4" />
              </Button>
            </form>
          </Form>
        ) : (
          <Form {...step2Form}>
            <form
              onSubmit={step2Form.handleSubmit(onStep2Submit)}
              className="space-y-4"
            >
              <FormField
                control={step2Form.control}
                name="city"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>City</FormLabel>
                    <FormControl>
                      <Input placeholder="Select City" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={step2Form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input
                        type="email"
                        placeholder="Enter E-mail Address"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={step2Form.control}
                name="contact"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Contact Number</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter contact number" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={step2Form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                      <Input type="password" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={step2Form.control}
                name="confirm_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Confirm Password</FormLabel>
                    <FormControl>
                      <Input type="password" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="flex space-x-4">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setStep(1)}
                  className="flex-1"
                >
                  <ChevronLeft className="mr-2 h-4 w-4" /> Back
                </Button>
                <Button type="submit" className="flex-1">
                  Register
                </Button>
              </div>
            </form>
          </Form>
        )}
      </CardContent>
    </Card>
  );
}

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is one explanation and solution to the issue:

What’s Happening

Even though you’re using two separate instances (step1Form and step2Form), when you conditionally render the forms within the same component tree without “forcing” a new mount, React may reuse underlying DOM nodes and internal field registries. This can make it appear as if values from step2 “bleed” into step1 when you go back.

How to Fix It

You can ensure that the form state remains separate and resets correctly by doing one (or more) of the following:

Use Unique Keys on Each Form

If you provide a unique key prop on the container of each form, React will remount it instead of reusing the component. For example:

JSX
{step === 1 && (
  <div key="step1">
    {/* Render step1 form */}
  </div>
)}
{step === 2 && (
  <div key="step2">
    {/* Render step2 form */}
  </div>
)}

Reset Form Values when Changing Steps

Call the reset method on the form instance before switching steps. For example, when the user clicks the Back button in step2, you can call:
```
JSX
<Button
  type="button"
  variant="outline"
  onClick={() => {
    step1Form.reset(); // Reset to initial/default values or optionally provide custom values
    setStep(1);
  }}
  className="flex-1"
>
  <ChevronLeft className="mr-2 h-4 w-4" /> Back
</Button>
```
This way, when you navigate back to step1, you ensure its fields reflect the intended state rather than possibly reusing stale data.

Isolate Each Form in Its Own Component

Splitting each step into its own component can also help ensure their internal states are kept separate. React unmounts the components when you change steps, so their instances aren’t mixed:

JSX
function Step1Form({ form, onSubmit, handleCountryChange, availableTimezones }) {
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        {/* ... your form fields for step1 ... */}
      </form>
    </Form>
  );
}

function Step2Form({ form, onSubmit }) {
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        {/* ... your form fields for step2 ... */}
      </form>
    </Form>
  );
}

Then conditionally render <Step1Form /> and <Step2Form />.

Conclusion

The overlapping values issue is due to the reuse of internal field instances by React Hook Form when the same component is conditionally rendered. Using unique keys, resetting the forms when switching steps, or isolating each form in its own component will prevent the unwanted carryover of values.

Choose the method that best fits your project organization.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by NeptunianSeeker284 • 1 month ago

I believe, this is related to this issue.

In your case, you need to pass a unique key for each <Form> instance, in order for these two instances to be re-rendered autonomously.

JAVASCRIPT
{step === 1 ? (  
  <Form key="1" {...step1Form}>  
    ...  
  </Form>  
  ) : (  
  <Form key="2" {...step2Form}>  
    ...  
  </Form>  
}

No comments yet.

Discussion

No comments yet.

How can I prevent values from bleeding between steps in a Next.js multi-step form?

2 Answers

What’s Happening

How to Fix It

Conclusion

Discussion

Similar Posts

Stripe Subscription Flow Error: Why Must elements.submit() Be Called Before stripe.confirmPayment()?