[bug]: CommandItem presents an error in the NextJS when used

[caioRafael]

Describe the bug

I'm creating a combobox for Brazilian states, and when using the CommandItem component, an error is presented in the system

Affected component/components

Combobox, CommandItem

How to reproduce

1- I create the combobox component with the popover and command, inside a FormField, and apply my options with an array.map()

                    <Popover>
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            variant={'outline'}
                            className="items-start justify-start"
                          >
                            {'Selecione a UF'}
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-full max-h-80 overflow-scroll">
                        <Command>
                          <CommandInput placeholder="Selecione a UF" />
                          <CommandGroup>
                            {brazilianStates.map((uf) => (
                              <CommandItem
                                key={uf.abbreviation}
                                value={`${uf.abbreviation} - ${uf.name}`}
                                onSelect={() =>
                                  form.setValue('state', uf.abbreviation)
                                }
                              >
                                {uf.abbreviation} - {uf.name}
                                <CheckIcon
                                  className={cn(
                                    'ml-auto h-4 w-4',
                                    uf.abbreviation === field.value
                                      ? 'opacity-100'
                                      : 'opacity-0',
                                  )}
                                />
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </Command>
                      </PopoverContent>
                    </Popover>

2- when using this code, I try to use the combobox and the following error is presented

3- but when I replace the CommandItem with a div, the code works perfectly

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

I'm use in Arc Browser, Google Chrome and Brave.
As the development framework, I am using NextJS 14.2.4.

Before submitting

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

[SabawoonBa]

You have to wrap the CommandGroup inside a CommandList to make it work. Your code would be like this after the change:

`<Popover>
         <PopoverTrigger asChild>
           <FormControl>
             <Button
               variant={'outline'}
               className="items-start justify-start"
             >
               {'Selecione a UF'}
             </Button>
           </FormControl>
         </PopoverTrigger>
         <PopoverContent className="w-full max-h-80 overflow-scroll">
           <Command>
            <CommandList>
             <CommandInput placeholder="Selecione a UF" />
             <CommandGroup>
               {brazilianStates.map((uf) => (
                 <CommandItem
                   key={uf.abbreviation}
                   value={`${uf.abbreviation} - ${uf.name}`}
                   onSelect={() =>
                     form.setValue('state', uf.abbreviation)
                   }
                 >
                   {uf.abbreviation} - {uf.name}
                   <CheckIcon
                     className={cn(
                       'ml-auto h-4 w-4',
                       uf.abbreviation === field.value
                         ? 'opacity-100'
                         : 'opacity-0',
                     )}
                   />
                 </CommandItem>
               ))}
             </CommandGroup>
            </CommandList>
           </Command>
         </PopoverContent>
         </Popover>`

[martinbechard]

Correct and the documentation needs to be updated as it still only shows how to do it with previous versions of the radix library (used for those Command components): https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

[prajanyasoft-prabin]

while wrap the CommandGroup inside a CommandList we lost click or onselect behavour

Could anyone please provide potential solutions for maintaining the click and on-select behaviors while encapsulating the CommandGroup within a CommandList?

[martinbechard]

There's a bug in the generated Command component (downloaded from shadcn).

<CommandPrimitive.Item ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className )} {...props} /> ))

(({ className, ...props }, ref) => { return ( The CSS is checking for data-[disabled] but the attribute is being set as disabled="false" which is still considered truthy in CSS. I changed it with a check for disabled='true', as per below: (You need to do it for pointer-events and opacity classes.)

<CommandPrimitive.Item ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50 ", className )} {...props} /> ); });

Le mar. 30 juill. 2024, à 06 h 17, prajanyasoft-prabin < @.***> a écrit :

while wrap the CommandGroup inside a CommandList we lost click or onselect behavour

Could anyone please provide potential solutions for maintaining the click and on-select behaviors while encapsulating the CommandGroup within a CommandList?

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/4377#issuecomment-2257997760, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE2LESY4OOMEWVJOC2WMXLZO5R5HAVCNFSM6AAAAABLIHDGSGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJXHE4TONZWGA . You are receiving this because you commented.Message ID: @.***>