Repository: ui
Issue: [bug]: Combobox is not working inside a dialog 
Labels: bug

### 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

```bash
React, javascript
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues