Need Help : Inconsistent behavior after removing the first item of dynamic field array, rendering other inputs uneditable

[Jervx]

When removing the 1st dynamically added input field in the "Worker Management" section, the remaining input fields become non-editable and also typing inside the remaining fields can sometimes lead to their values being unexpectedly updated or synchronized with previously entered values.

Code Snippet (Relevant Part):

"use client";
import z from "zod";
import { Users, XIcon } from "lucide-react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useFieldArray, useForm } from "react-hook-form";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";

const nameSchema = z.object({
    names: z.array(
        z.object({
            name: z.string(),
        })
    ),
});

export default function WorkerPage() {
    const form = useForm<z.infer<typeof nameSchema>>({
        resolver: zodResolver(nameSchema),
    });

    const { fields, append, remove } = useFieldArray({
        control: form.control,
        name: "names",
    });

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <Users className="h-6 w-6" />
                    <h1 className="text-2xl font-bold">Worker Management</h1>
                </div>
            </div>
            <p>Manage workers and their profile.</p>

            <Form {...form}>
                <form>
                    <FormItem className="col-span-1 space-y-2">
                        <Separator />
                        <p className="text-sm text-muted-foreground/70">
                            Closure reason helps others to understand what are
                            the reasons for the member&apos;s account/profile
                            closure.
                        </p>
                        <fieldset className="space-y-2">
                            {fields.map((entry, index) => (
                                <div
                                    key={entry.id} 
                                    className="relative space-y-2 rounded-xl border bg-background p-4"
                                >
                                    <FormField
                                        name={`names.${index}.name`}
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormControl>
                                                    <Input
                                                        {...field}
                                                        className="w-full"
                                                        placeholder="Name"
                                                    />
                                                </FormControl>
                                            </FormItem>
                                        )}
                                    />

                                    <Button
                                        size="icon"
                                        type="button"
                                        variant="secondary"
                                        onClick={() => remove(index)}
                                        className="absolute -right-1 -top-1 !my-0 size-fit rounded-full p-1"
                                    >
                                        <XIcon className="size-4" />
                                    </Button>
                                </div>
                            ))}
                        </fieldset>
                    </FormItem>

                    <button type="button" onClick={() => append({ name: "" })}>
                        Add Name
                    </button>
                </form>
            </Form>
        </div>
    );
}

simplescreenrecorder-2025-04-08_19.34.41.mp4

Much appreciated for the help thanks!🫰

[pjookim]

Instead of spreading ...field, manually bind the required properties to the input:

<Input
  value={field.value}
  onChange={field.onChange}
  onBlur={field.onBlur}
  name={field.name}
  ref={field.ref}
  placeholder="Name"
/>

This gives React Hook Form full control over the input and prevents stale references or shared state between fields.