Open NatnaelMalike opened 1 month ago
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
Combobox, Dialog
<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> )} />
<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>
No response
React, javascript
Hey, did you find any solution for this?
This fixed my issue.
https://github.com/shadcn-ui/ui/issues/235#issuecomment-1569105260
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
The Code: for Combobox
The Code: for DialogComponent
Logs
No response
System Info
Before submitting