Use Shadcn dialog and form together, but submit from dialog not form.

[step2341]

I've been having trouble attempting to use the Shadcn react-hook form wrapper with a dialog hook. the behavior im trying to implement is to trigger the onSubmit (or any action, such as passing data back to the parent component) from the button in the dialog.

ive found a couple of articles like this, but none of these approaches seem to work.
https://bdaneesha.medium.com/react-submit-form-using-button-in-parent-component-ii-d58c43abcfc8

any ideas?

[pablotanner]

Why can't you just add onClick={onSubmit} to the button in the dialog? Like you could do form.trigger() to trigger/check for errors, then if there aren't any errors you do onSubmit.

onClick={() => {
     form.trigger()
    if (form.formState.isValid) onSubmit()
}}

[GatienFrenchDev]

Yes but form.trigger is an asynchronous method (see react-hook-form doc), so you need to add a await and async declaration.

onClick={async () => {
    await form.trigger();  // Manually triggers form or input validation
    if (form.formState.isValid) onSubmit(); // Call the `onSubmit` function if the form is validated
}}

[GustavoOS]

Shadcn has a bug, if you add an AlertDialog inside a form, the action does not propagate submit

[firxworx]

Hey @GustavoOS I stumbled across this looking for something else, but I saw the upvotes and thought I'd share that you have to be careful with using any sort of dialog or modal because of React portals.

You can think of them as being "teleported" to a different part of the DOM where they are not "inside" what you think they are.

https://react.dev/reference/react-dom/createPortal

I don't know the specifics of your app but from your description this could be impacting you here.

If you have a form (or anything really; including any React context providers), and then you put any sort of modal "inside" as a child, you have to remember that if your modal is rendered using a react portal then its contents will be rendered in a different part of the DOM where it is not a child.

If that is the case in your code there is no bug with shadcn or anything else as they are all working as designed and you have to use a different approach.

For example, a dialog can be rendered with a callback function to call on save/close to communicate any data changes back to the parent that triggered it, and then the parent can then take care of updating its form accordingly.

This can be tricky and can rear its head with other modal-like things as well including popovers, menus, etc.

[darryladr]

Hi @firxworx I checked the documentation of Radix-UI primitive and I found that you can customize the parent container that your dialog portals into by passing the 'container' props into the Dialog.Portal

https://www.radix-ui.com/primitives/docs/components/dialog#custom-portal-container

import React from "react";
import * as Dialog from "@radix-ui/react-dialog";

export default () => {
  const [container, setContainer] = React.useState(null);
  return (
    <div>
      <Dialog.Root>
        <Dialog.Trigger />
        <Dialog.Portal container={container}>
          <Dialog.Overlay />
          <Dialog.Content>...</Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

      <div ref={setContainer} />
    </div>
  );
};

As you can see the Dialog now became the child of the Form component

But I still got the same issue, the submit button inside the Dialog won't propagate the Form submit event and I have to create a synthetic event inside the Dialog button onClick handler in order to trigger the Form submit (which is buggy and not what I wanted). Do you have any Idea why this is happening?

In the meantime I'm using the callback function approach for the submit button

[nimeshmaharjan1]

any solutions?

import { zodResolver } from "@hookform/resolvers/zod";
import type { AlertDialogProps } from "@radix-ui/react-alert-dialog";
import type { FC } from "react";
import { useForm } from "react-hook-form";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
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 type { LicenseType } from "@/types/licenses.types";
import { type LicenseSchemaType, licenseSchema } from "./_schema";

const LicensesDialog: FC<
  {
    type: "add" | "remove";
    licenseTypes: LicenseType[];
  } & AlertDialogProps
> = ({ type, licenseTypes, ...props }) => {
  const form = useForm<LicenseSchemaType>({
    defaultValues: {
      amount: 1,
      licenseType: "",
    },
    resolver: zodResolver(licenseSchema),
  });
  console.log(form.formState.errors);
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit((values) => console.log(values))}>
        <AlertDialog {...props}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>
                <span className="capitalize">{type} Licenses</span>
              </AlertDialogTitle>
              <AlertDialogDescription>
                {type === "add"
                  ? "Specify how many licenses you want to add and their type."
                  : "Specify how many licenses you want to remove and their type."}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <main className="space-y-6">
              <div>
                <FormField
                  control={form.control}
                  name="amount"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>License</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          value={field.value ?? ""}
                          placeholder="Enter license number"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <div>
                <FormField
                  control={form.control}
                  name="licenseType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>License Type</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                      >
                        <FormControl>
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Select license" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {licenseTypes.map((type) => (
                            <SelectItem key={type.id} value={type.key}>
                              {type.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </main>
            <AlertDialogFooter>
              <Button
                onClick={() => {
                  if (props.onOpenChange) {
                    props.onOpenChange(false);
                  }
                }}
                variant={"outline"}
              >
                Cancel
              </Button>
              <Button type="submit">{type === "add" ? "Add" : "Remove"}</Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </form>
    </Form>
  );
};

export default LicensesDialog;