Compatibility Issue After Upgrading cmdk to Version 1.0.0 🚨

[pavelbe]

Hello shadcn ui team and community! 👋

I've encountered an issue after updating the cmdk library from version 0.2.1 to 1.0.0 in a project that utilizes the Command, CommandGroup, CommandItem, CommandEmpty, and CommandInput components from @/components/ui/command. Everything worked fine before the update, but after upgrading, the following error surfaced:

Unhandled Runtime Error
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I attempted to update the Command components, but it didn't resolve the issue. It seems that the upgrade to cmdk version 1.0.0 introduced changes that may require additional actions from the shadcn ui developers to ensure compatibility. 🛠️

I would greatly appreciate any advice or suggestions on how to address this issue. 🙏 Are there updates or patches that I might have missed? Or perhaps specific changes are needed in the project code to adapt to the new version of cmdk? 🔍

☹️ Link to my code - https://disk.yandex.ru/d/62rxj_ebZZSIVg

Thank you for your time and assistance! 🙌

[boldrack]

@pavelbe Does downgrading the cmdk work for you ?

[boldrack]

Downgrading down worked for me

[Lucas-Ayabe]

This problem is caused by a breaking change in the cmdk package. Check the source here: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

Now is required to use the CommandList component wrapping the CommandGroup. Check this example:

Change from this:

<Command>
    <CommandInput placeholder="Search framework..." />
    <CommandEmpty>No framework found.</CommandEmpty>
      <CommandGroup>
          {frameworks.map((framework) => (
              <CommandItem key={framework.value}>
                  {framework.label}
              </CommandItem>
          ))}
      </CommandGroup>
</Command>

To this:

<Command>
    <CommandInput placeholder="Search framework..." />
    <CommandEmpty>No framework found.</CommandEmpty>
    <CommandList>
        <CommandGroup>
            {frameworks.map((framework) => (
                <CommandItem key={framework.value}>
                    {framework.label}
                </CommandItem>
            ))}
        </CommandGroup>
    </CommandList>
</Command>

[theDanielJLewis]

Has this been updated in the source, yet?

[pongstr]

@theDanielJLewis you can literally just wrap <CommandGroup/> or <CommanItem/> inside <CommandList/> and it will work.