[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined

[ScottyMaher]

Describe the bug

In an any Next.js project this is an issue I get simply trying to use the first example combobox as is - copying straight from the docs and without changing anything.

The issue is that the first and last examples do not use a <CommandList> to wrap the <CommandEmpty> and <CommandGroup>. To fix the issue, there must be a CommandList, as the cmdk docs specify.

Here is an excerpt from the first example:

<Command>
  <CommandInput placeholder="Search framework..." className="h-9" />
  <CommandEmpty>No framework found.</CommandEmpty>
  <CommandGroup>
    {frameworks.map((framework) => (
      // some code for CommandItems
    ))}
  </CommandGroup>
</Command>

To fix the issue, add CommandList to the imports and change it to this:

<Command>
  <CommandInput placeholder="Search framework..." className="h-9" />
  <CommandList>
    <CommandEmpty>No framework found.</CommandEmpty>
    <CommandGroup>
      {frameworks.map((framework) => (
        // some code for CommandItems
      ))}
    </CommandGroup>
  </CommandList>
</Command>

The update to cmdk also included "The aria-disabled and aria-selected props will now be set to false, instead of being undefined", which means that the tailwind on the CommandItem also needs to be changed otherwise the mouse events will be disabled on the list:

- "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+ "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50"

Affected component/components

Combobox

How to reproduce

1. Install a fresh Next.js project
2. Init shadcn and install combobox dependencies
3. Copy combobox demo code
4. Try to use the combobox

Codesandbox/StackBlitz link

No response

Logs

Unhandled Runtime Error
TypeError: Array.from requires an array-like object - not null or undefined
Call Stack
from

[native code]
forEach

[native code]

System Info

Tested on MacOS Sonoma and Windows 10, with Next.js 14.

Before submitting

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

[paresiqbal]

But it can't be click now, but still able to use search and press enter.

[ScottyMaher]

But it can't be click now, but still able to use search and press enter.

Yeah that's an issue as well. As mentioned in a different thread, the breaking update to cmdk also included "The aria-disabled and aria-selected props will now be set to false, instead of being undefined", which means that the tailwind on the CommandItem needs to be changed to:

- "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+ "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50"

I'll include this in the original post

[joonheeu]

I resolved the issue temporarily by downgrading the version.

# package.json

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",

npm install

[treipatru]

I resolved the issue temporarily by downgrading the version.

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",

Thanks for the suggestion. I just tried with v 0.2.1 and that works too.

[dsyx]

cmdk v1.0.0 has a breaking update:

Command.List is now required (CommandList in shadcn)

Rendering the Command.List part (CommandList if using shadcn) is now mandatory. Otherwise, you should expect to see an error like this:

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

Currently, the dependency of the Combobox example is: "cmdk": "^0.2.0".

It is not recommended to use CommandList to contain CommandItem, which will disable pointer events of CommandItem.

[jercomio]

Hello, I had the same problem with Next.js 14 and I found the following solution:

1. CommandList is required (@dsyx )
2. In command.tsx and for CommandItem, replace in className: data-[disabled]:pointer-events-none by data-[disabled]:pointer-events-auto

And now, the Combobox component works.

[isneverdead]

i have solution here, i'm using "cmdk": "^0.2.0"but because it will disable the pointer events of commandItem, i'm adding state to popover and change the state when user click on the initial button or the commandGroup. i know maybe it not the best but at least it can work again until this bug get fixed.

const Page = () => {
........

  const [popover1, setPopover1] = useState(false);

........
<Popover open={popover1}>  // <------------ here
    <PopoverTrigger asChild>
      <FormControl>
        <Button
          onClick={() => setPopover1(!popover1)} // <------------ here
          variant='outline'
          role='combobox'
          className={cn(
            'w-[200px] justify-between',
            !field.value && 'text-muted-foreground'
          )}
        >
          {field.value
            ? vendorList.find(
                (vndr) => vndr.value === field.value
              )?.label
            : 'Select Vendor'}
          <CaretSortIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
        </Button>
      </FormControl>
    </PopoverTrigger>
    <PopoverContent className='w-[200px] p-0'>
      <Command>
        <CommandInput
          placeholder='Search Vendor...'
          className='h-9'
        />
        <CommandEmpty>No framework found.</CommandEmpty>
        <CommandGroup onClick={() => setPopover1(!popover1)}>  // <------------ here
          {vendorList.map((vendorItem) => (
            <CommandItem
              value={vendorItem.label}
              key={vendorItem.value}
              onSelect={() => {
                form.setValue('vendorId', vendorItem.value);
              }}
            >
              {vendorItem.label}
              <CheckIcon
                className={cn(
                  'ml-auto h-4 w-4',
                  vendorItem.value === field.value
                    ? 'opacity-100'
                    : 'opacity-0'
                )}
              />
            </CommandItem>
          ))}
        </CommandGroup>
      </Command>
    </PopoverContent>
  </Popover>

[maik-emanoel]

I resolved the issue temporarily by downgrading the version.

# package.json

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",

npm install

This worked perfectly to me, thanks.

[d1d4r]

I resolved the issue temporarily by downgrading the version.

# package.json

- "cmdk": "^1.0.0",
+ "cmdk": "0.2.0",

npm install

it work perfectly

[aminulidev]

data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50

Its working for me. thanks

[treipatru]

While downgrading the version of cmdk works well, there is a drawback: the keywords prop does not exist in 0.2.1 and below. So if you need to filter by multiple values, the original workaround (1st post) works just fine with the latest cmdk version. Thanks everyone for the shared info :pray:

[mk48]

Hello, I had the same problem with Next.js 14 and I found the following solution:

1. `CommandList` is required (@dsyx )

2. In `command.tsx` and for `CommandItem`, replace in `className`:
   `data-[disabled]:pointer-events-none` by `data-[disabled]:pointer-events-auto`

And now, the Combobox component works.

Thanks, It's fixed the issue

[harryzcy]

Why is this closed as completed? Is #3268 the right PR that's working on this?

[ScottyMaher]

Why is this closed as completed? Is #3268 the right PR that's working on this?

Oh, I just closed it because it has an answer on how to fix it now. Was able to update the OP with the answers as people commented them. Similar to how I might close my issue on StackOverflow once it's been successfully answered. Based on your comment I'm guessing it's supposed to stay open until the fix exists in the actual source code? This is the first github issue I've ever posted.

[michidk]

Yeah, I think this bug report should stay open until the bug is fixed (which is it not) and the code works as intended.

[code-PA-32]

None of the fixes—not data-[disabled='true'] or a CMDK downgrade—work. 😃

[lohrm-stabl]

@ScottyMaher can you please reopen this?

[rppala3]

This worked for me as well.

Hello, I had the same problem with Next.js 14 and I found the following solution:

1. `CommandList` is required (@dsyx )

This is not needed.

2. In `command.tsx` and for `CommandItem`, replace in `className`:
   `data-[disabled]:pointer-events-none` by `data-[disabled]:pointer-events-auto`

At this point this is not a bug anymore, but it's a misalignment with the documentation. See combobox page. All the examples contain legacy code. That is not true in the command page. The examples are good.