[bug]: Combobox is not working inside a dialog

[NatnaelMalike]

Describe the bug

the combobox elements are not able to be selected and the search input also can't be focused i use the same combobox outside the dialog it works fine

Affected component/components

Combobox, Dialog

How to reproduce

1. install popover and command
2. install dialog and use form
3. put the combobox inside form and the form inside the dialog
4. try to access the combobox

The Code: for Combobox

<FormField
                    control={form.control}
                    name="department"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Department</FormLabel>
                            <Popover>
                                <PopoverTrigger asChild>
                                    <FormControl>
                                        <Button
                                            variant="outline"
                                            role="combobox"
                                            className={cn(
                                                "w-full justify-between",
                                                !field.value &&
                                                    "text-muted-foreground"
                                            )}>
                                            {field.value
                                                ? departments.find(
                                                      (department) =>
                                                          department._id ===
                                                          field.value
                                                  )?.name
                                                : "Select Your Department"}
                                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                        </Button>
                                    </FormControl>
                                </PopoverTrigger>
                                <PopoverContent className="p-0 max-h-80 overflow-y-scroll">
                                    <Command>
                                        <CommandInput
                                            placeholder="Search Department..."
                                            className="h-9 pointer-events-auto"
                                        />
                                        <CommandEmpty>
                                            No Department found.
                                        </CommandEmpty>

                                        <CommandGroup>
                                            {departments.map((department) => (
                                                <CommandItem
                                                    value={department._id}
                                                    key={department._id}
                                                    onSelect={() => {
                                                        form.setValue(
                                                            "department",
                                                            department._id
                                                        );
                                                    }}>
                                                    {department.name}
                                                    <Check
                                                        className={cn(
                                                            "ml-auto h-4 w-4",
                                                            department._id ===
                                                                field.value
                                                                ? "opacity-100"
                                                                : "opacity-0"
                                                        )}
                                                    />
                                                </CommandItem>
                                            ))}
                                        </CommandGroup>
                                    </Command>
                                </PopoverContent>
                            </Popover>
                            <FormDescription className="hidden lg:block">
                                This is the name of the Your Department.
                            </FormDescription>
                            <FormMessage />
                        </FormItem>
                    )}
                />
 

The Code: for DialogComponent

<Dialog open={open} onOpenChange={handleDialogChange}>
            <DialogTrigger asChild>
                <Button className="space-x-2 bg-teal-800" onClick={handleDialogChange}>
                    <SquarePlus />
                    <p className="text-base">Add {entity}</p>
                </Button>
            </DialogTrigger>
            <DialogContent className="max-sm:w-11/12">
                <DialogHeader>
                    <DialogTitle className="text-xl text-center mb-2">Add {entity}</DialogTitle>
                    <DialogDescription className="text-base text-center mb-2">
                        Adding a new {entity} to the system
                    </DialogDescription>
                </DialogHeader>
                <DialogContext.Provider value={handleDialogChange}>
                    {children}
                </DialogContext.Provider>
            </DialogContent>
        </Dialog>

Logs

No response

System Info

React, javascript

Before submitting

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

[rohit-ks]

Hey, did you find any solution for this?

[rohit-ks]

This fixed my issue.

#235 (comment)