Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

validateDOMNesting Warning for Form #693

Closed
indahud opened this issue Jun 24, 2023 · 1 comment
Closed

validateDOMNesting Warning for Form #693

indahud opened this issue Jun 24, 2023 · 1 comment

Comments

@indahud
Copy link

indahud commented Jun 24, 2023

I am using React Hook form inside radix in my component like this.

const profileFormSchema = z.object({
  name: z
    .string({ required_error: "Name is required" })
    .min(2, {
      message: "Username must be at least 2 characters.",
    })
    .max(30, {
      message: "Username must not be longer than 30 characters.",
    }),
  description: z.string().optional(),
});

type ProfileFormValues = z.infer<typeof profileFormSchema>;

export function ProfileForm() {
  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileFormSchema),
    defaultValues: {
      name: "",
      description: "",
    },
    mode: "onChange",
  });

  function onSubmit(data: ProfileFormValues) {
    console.log(data);
  }

  return (
    <section>
      <div className="flex flex-col justify-between gap-2 sm:flex-row">
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="outline">Show Dialog</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
              <AlertDialogDescription>
                <Form {...form}>
                  <form
                    onSubmit={form.handleSubmit(onSubmit)}
                    className="space-y-8"
                  >
                    <FormField
                      control={form.control}
                      name="name"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Username</FormLabel>
                          <FormControl>
                            <Input placeholder="shadcn" {...field} />
                          </FormControl>
                          <FormDescription>
                            This is your public display name. It can be your
                            real name or a pseudonym. You can only change this
                            once every 30 days.
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="description"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Username</FormLabel>
                          <FormControl>
                            <Input placeholder="shadcn" {...field} />
                          </FormControl>
                          <FormDescription>
                            This is your public display name. It can be your
                            real name or a pseudonym. You can only change this
                            once every 30 days.
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <Button type="submit">Update profile</Button>
                  </form>
                </Form>
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
    </section>
  );
}

I am getting warning like this in console
Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <p>.

@dan5py
Copy link
Contributor

dan5py commented Jun 24, 2023

The AlertDialogDescription component is a paragraph element (<p>) and you should not place a form inside of it (or any other block element).

You can place the form inside the <AlertDialogContent> tag directly (since it's a div element).

p.s.: or maybe use the Dialog component instead.

@indahud indahud closed this as completed Sep 13, 2023
Etsija added a commit to eclipse-apoapsis/ort-server that referenced this issue Feb 6, 2025
Since AlertDialogDescription is specified as a HTML paragraph element, it
cannot contain any block elements inside it [1], otherwise it will cause
hydration errors in the browser. Fix this by rearranging the component to
have several AlertDialogDescription components, each with no block
elements inside.

[1]: shadcn-ui/ui#693 (comment)

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
Etsija added a commit to eclipse-apoapsis/ort-server that referenced this issue Feb 6, 2025
Since AlertDialogDescription is specified as a HTML paragraph element, it
cannot contain any block elements inside it [1], otherwise it will cause
hydration errors in the browser. Fix this by rearranging the component to
have several AlertDialogDescription components, each with no block
elements inside.

Also show the confirmation text and input only when requested for.

[1]: shadcn-ui/ui#693 (comment)

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
Etsija added a commit to eclipse-apoapsis/ort-server that referenced this issue Feb 6, 2025
Since AlertDialogDescription is specified as a HTML paragraph element, it
cannot contain any block elements inside it [1], otherwise it will cause
hydration errors in the browser. Fix this by rearranging the component to
have several AlertDialogDescription components, each with no block
elements inside.

[1]: shadcn-ui/ui#693 (comment)

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
github-merge-queue bot pushed a commit to eclipse-apoapsis/ort-server that referenced this issue Feb 6, 2025
Since AlertDialogDescription is specified as a HTML paragraph element, it
cannot contain any block elements inside it [1], otherwise it will cause
hydration errors in the browser. Fix this by rearranging the component to
have several AlertDialogDescription components, each with no block
elements inside.

[1]: shadcn-ui/ui#693 (comment)

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants