Using form + combobox inside a dialog

[ryanbitonio]

Does anyone know why I can't select any of the items in the combobox? It automatically closes the dialog upon clicking any of the items. My goal is to create a dialog with form inside, specifically combobox and input fields. I tried removing the dialog and it works perfectly fine. Not sure what's causing the issue.

import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import { Icons } from "@/config/icons";
import { bugReportSchema } from "@/lib/validations/bug-report-validation";

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

import { emails } from "@/config/emails";
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react";
import useBugReport from "../hooks/useBugReport";
import { z } from "zod";

const BugReportForm = () => {
  const { data, mutate, isPending } = useBugReport();

  const form = useForm({
    resolver: zodResolver(bugReportSchema),
    defaultValues: {
      email: "",
      summary: "",
      stepsToReproduce: "",
      expectedBehavior: "",
      actualBehavior: "",
      additionalContext: "",
    },
  });

  const {
    control,
    formState: { isSubmitting },
    handleSubmit,
    setFocus,
  } = form;

  function onSubmit(data: z.infer<typeof bugReportSchema>) {
    mutate(data);

    setFocus("email");
  }

  return (
    <>
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">
            <Icons.megaphone className="mr-2 h-4 w-4" /> Report a bug
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Report a Bug</DialogTitle>
            <DialogDescription>
              Use this form to report any bugs or issues you encounter
            </DialogDescription>
          </DialogHeader>
          <div className="grid flex-1 mt-4">
            <Form {...form}>
              <form
                onSubmit={handleSubmit(onSubmit)}
                className="-mt-4 space-y-3"
              >
                <FormField
                  control={form.control}
                  name="email"
                  key="email"
                  render={({ field }) => (
                    <FormItem className="flex flex-col">
                      <FormLabel>Email</FormLabel>
                      <Popover>
                        <PopoverTrigger asChild>
                          <FormControl>
                            <Button
                              variant="outline"
                              role="combobox"
                              className={cn(
                                "w-full justify-between",
                                !field.value && "text-muted-foreground"
                              )}
                            >
                              {field.value
                                ? emails.find(
                                    email => email.value === field.value
                                  )?.label
                                : "Select email"}
                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                            </Button>
                          </FormControl>
                        </PopoverTrigger>
                        <PopoverContent className="w-full p-0">
                          <Command>
                            <CommandInput placeholder="Search email..." />
                            <CommandList>
                              <CommandEmpty>No email found.</CommandEmpty>
                              <CommandGroup>
                                {emails.map(email => (
                                  <CommandItem
                                    value={email.label}
                                    key={email.value}
                                    onSelect={() => {
                                      form.setValue("email", email.value);
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        email.value === field.value
                                          ? "opacity-100"
                                          : "opacity-0"
                                      )}
                                    />
                                    {email.label}
                                  </CommandItem>
                                ))}
                              </CommandGroup>
                            </CommandList>
                          </Command>
                        </PopoverContent>
                      </Popover>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </form>
            </Form>
          </div>
          <DialogFooter className="sm:justify-between">
            <DialogClose asChild>
              <Button type="button" variant="secondary">
                Close
              </Button>
            </DialogClose>
            <Button disabled={isSubmitting} type="submit">
              {isSubmitting ? (
                <Icons.loading className="w-4 h-4 mr-2 animate-spin" />
              ) : (
                "Submit"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default BugReportForm;

[legraxieux53]

I encountered the same issue with using a combobox with a sheet. I believe both components conflict because they use the same overlay system. I'm also wondering how to resolve this bug. It's really frustrating me.

[legraxieux53]

The solution is here 1748. You need to add the class pointer-events-auto to the PopoverContent component. It work for me !

[Yuta4u]

thank you sir @legraxieux53 , workss

[aidenjcheng]

thank u ❤️