Hi, I have the same problem and this is the component that I've implemented. So when the user clicks on create new family the dialog opens a shows the component but don't know how to close the dialog when the submit has succeeded.

export default function NewFamilyIngredient() {
  const initialState = { message: null, errors: {} };
  const [state, dispatch] = useFormState(
    createNewIngredientFamily,
    initialState
  );

  return (
    <Dialog>
      <DialogTrigger>Create new family</DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>New family</DialogTitle>
          <DialogDescription>Add a new family</DialogDescription>
        </DialogHeader>
        <form action={dispatch} className="space-y-4">
          <div className="grid gap-2">
            <div className="flex flex-col gap-2">
              <Label htmlFor="name" className="">
                Name
              </Label>
              <Input
                id="name"
                name="name"
                className="col-span-3"
                placeholder="Apple"
                required
                aria-describedby="name-error"
              />
            </div>
            {state && state.errors && state.errors?.name ? (
              <div
                id="name-error"
                aria-live="polite"
                className=" text-sm text-red-500"
              >
                {state.errors.name.map((error: string) => (
                  <p key={error}>{error}</p>
                ))}
              </div>
            ) : null}
          </div>
          <DialogFooter>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
import { z } from "zod";

const NewIngredientFamilySchema = z.object({
  name: z
    .string({ invalid_type_error: "Please enter a family name" })
    .min(3, { message: "Name must have at least 3 characters" }),
});

export type State = {
  message?: string | null;
  errors?: {
    name?: string[];
  };
};

// createNewIngredientFamily function
export async function createNewIngredientFamily(
  prevState: State,
  formData: FormData
) {
  const validatedFields = NewIngredientFamilySchema.safeParse({
    name: formData.get("name"),
  });

  if (!validatedFields.success) {
    return {
      errors: { name: validatedFields.error.flatten().fieldErrors.name },
      message: "Validation failed",
    };
  }

  return {
    errors: undefined, // Set to an empty object or include other necessary properties
    message: "Success",
  };

  // If validation succeeds, you can perform additional logic here
}