[bug]: CommandInput of Combobox inside a Dialog not working

[francescotau]

Describe the bug

CommandInput field of a Combobox placed inside a Dialog is not working (cannot type anything in the input field).

Affected component/components

Combobox

How to reproduce

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { zodResolver } from "@hookform/resolvers/zod";
import { Check, ChevronsUpDown } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { useState } from "react";

const languages = [
  { label: "English", value: "en" },
  { label: "French", value: "fr" },
  { label: "German", value: "de" },
  { label: "Spanish", value: "es" },
  { label: "Portuguese", value: "pt" },
  { label: "Russian", value: "ru" },
  { label: "Japanese", value: "ja" },
  { label: "Korean", value: "ko" },
  { label: "Chinese", value: "zh" },
] as const;

const FormSchema = z.object({
  language: z.string({
    required_error: "Please select a language.",
  }),
});

export default function TestModal() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });

  const [open, setOpen] = useState(false);

  function onSubmit(data: z.infer<typeof FormSchema>) {
    console.log(data);
  }

  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>

      <DialogContent>
        <DialogHeader>
          <DialogTitle>Test</DialogTitle>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="language"
              render={({ field }) => (
                <FormItem className="flex flex-col">
                  <FormLabel>Language</FormLabel>
                  <Popover open={open} onOpenChange={setOpen} modal={true}>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={open}
                          className={cn(
                            "w-[200px] justify-between",
                            !field.value && "text-muted-foreground",
                          )}
                        >
                          {field.value
                            ? languages.find(
                                (language) => language.value === field.value,
                              )?.label
                            : "Select language"}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-[200px] p-0">
                      <Command>
                        {/* Here not working */}
                        <CommandInput placeholder="Search language..." />
                        <CommandList>
                          <CommandEmpty>No language found.</CommandEmpty>
                          <CommandGroup>
                            {languages.map((language) => (
                              <CommandItem
                                value={language.label}
                                key={language.value}
                                onSelect={() => {
                                  form.setValue("language", language.value);
                                  setOpen(false);
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    language.value === field.value
                                      ? "opacity-100"
                                      : "opacity-0",
                                  )}
                                />
                                {language.label}
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                  <FormDescription>
                    This is the language that will be used in the dashboard.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit">Submit</Button>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

No relevant info

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[AtharvaJoshi16]

@francescotau You need to use CommandDialog instead of Popover. Check it out here: https://ui.shadcn.com/docs/components/command

[francescotau]

@francescotau You need to use CommandDialog instead of Popover. Check it out here: https://ui.shadcn.com/docs/components/command

Nope, this is not the same thing. I have a Dialog that contains a Form consisting of multiple fields and one field of the Form should be the Combobox.

[francescotau]

Updating from:

"@radix-ui/react-popover": "^1.0.7",
"cmdk": "^0.2.0",

to:

"@radix-ui/react-popover": "^1.1.1",
"cmdk": "^1.0.0",

solved the issue for me.

[shaunkickbusch]

Still getting this even with

"@radix-ui/react-popover": "^1.1.1", "cmdk": "^1.0.0",

[lukasver]

Still getting this even with

"@radix-ui/react-popover": "^1.1.1", "cmdk": "^1.0.0",

pass modal={false} to the Popover AND the Dialog elements

[ahmetaydar]

ı passed modal={false} to the Popover and Dialog elements and CommandInput worked.but now dialog's backgrounds removed.