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

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

Install a fresh Next.js project
Init shadcn and install combobox dependencies
Copy combobox demo code
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

I’ve made research efforts and searched the documentation
I’ve searched for existing issues

About this issue

Original URL
State: closed
Created 3 months ago
Reactions: 24
Comments: 16 (1 by maintainers)

Most upvoted comments

I resolved the issue temporarily by downgrading the version.

# package.json

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

npm install

+22

joonheeu on Mar 19, 2024

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.

+13

treipatru on Mar 19, 2024

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

CommandList is required (@dsyx )
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.

jercomio on Mar 22, 2024

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.

dsyx on Mar 20, 2024

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

ScottyMaher on Mar 20, 2024

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

paresiqbal on Mar 19, 2024

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 🙏

treipatru on Apr 4, 2024

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

michidk on Apr 27, 2024

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

harryzcy on Apr 26, 2024