How to focus on a certain field after successful form submission

[shanmugharajk]

Hi Team,

Need some guidance on how to focus on the first field after successful form submission.

• no client side errors
• after submitting to server if the save is success

In this situation I need to focus to the first field after user hit enter.

How to achieve this?

What I tried is as

import { useEffect, useRef } from "react";
import {
  type ActionFunctionArgs,
  type LoaderFunctionArgs,
  json,
} from "@remix-run/node";
import { Form, useActionData, useNavigation } from "@remix-run/react";
import { getFormProps, getInputProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { z } from "zod";

import { authenticate } from "~/services/auth";
import { FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { Button } from "~/components/ui/button";
import { tryResolve } from "~/utils/promise";
import { addNewCategory } from "~/services/persistence";

const schema = z.object({
  id: z.string().min(2, {
    message: "Category id must be at least 2 characters.",
  }),
  description: z.string().min(4, {
    message: "Category description must be at least 4 characters.",
  }),
});

export const loader = async ({ request }: LoaderFunctionArgs) => {
  return await authenticate({ request });
};

export const action = async ({ request }: ActionFunctionArgs) => {
  await authenticate({ request });

  const formData = await request.formData();
  const submission = parseWithZod(formData, { schema });

  if (submission.status !== "success") {
    return json(submission.reply());
  }

  const [, error] = await tryResolve(addNewCategory(submission.value));

  if (!error) {
    return json(submission.reply({ resetForm: true }));
  }

  if (error.code === "P2002") {
    return json(
      submission.reply({
        formErrors: [`The category ${submission.value.id} already present`],
      })
    );
  }

  return json(submission.reply({ formErrors: ["Failed to save category"] }));
};

const AddExpenseCategory = () => {
  const { state } = useNavigation();

  // Last submission returned by the server
  const lastResult = useActionData<typeof action>();

  const idRef = useRef<HTMLInputElement>(null);

  const [form, fields] = useForm({
    lastResult,

    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },

    // Validate the form on blur event triggered
    shouldValidate: "onSubmit",
    shouldRevalidate: "onInput",
  });

  // After successful submission shift the focus to the id field
  useEffect(() => {
    if (Object.keys(form.allErrors) || lastResult?.intent?.payload) {
      return;
    }

    idRef.current?.focus();
  }, [form.allErrors, lastResult?.intent?.payload]);

  return (
    <div className="flex flex-col items-center">
      <div className="w-[375px] md:w-[600px] space-y-8 px-6 py-6">
        <h2 className="font-semibold">Add Category</h2>

        <FormMessage id="form_message" error={form.errors?.[0]} />

        <Form className="space-y-6" method="post" {...getFormProps(form)}>
          <FormItem>
            <FormLabel htmlFor={fields.id.id}>Category Id</FormLabel>
            <Input
              ref={idRef}
              autoComplete="off"
              placeholder="Category Id"
              {...getInputProps(fields.id, { type: "text" })}
              key={fields.id.key}
            />
            <FormMessage id="id_message" error={fields.id.errors?.[0]} />
          </FormItem>

          <FormItem>
            <FormLabel htmlFor={fields.description.id}>Description</FormLabel>
            <Input
              autoComplete="off"
              placeholder="Description"
              {...getInputProps(fields.description, { type: "text" })}
              key={fields.description.key}
            />
            <FormMessage
              id="description_message"
              error={fields.description.errors?.[0]}
            />
          </FormItem>

          <Button
            type="submit"
            size="sm"
            variant="default"
            disabled={state === "submitting"}
          >
            Add Category
          </Button>
        </Form>
      </div>
    </div>
  );
};

export default AddExpenseCategory;

This approach is not working in few cases like,

• user typed first field and pressed enter
• shows the error in second field
• after entering the proper value in second field before submitting only the focus goes to the id field